鍍金池/ 問答/HTML/ chrome table邊框虛線問題

chrome table邊框虛線問題

設(shè)置了td的邊框

  .table-wrap table {
    border-collapse:collapse;
    text-align: center;
  }
   .table-wrap table tr {
    border-bottom: dashed 1px #fff;
   }

在Chrome 上有這樣的問題。

Chrome 上列的相鄰處會出現(xiàn)較長的一段實線（如下圖）。

Chrome上的效果

Safari 也有這樣的問題（如下圖），但是表現(xiàn)不明顯。

Safari上的效果

回答
編輯回答
青檸

這情況是因為邊框合并 border-collapse:collapse 造成的吧。

table {
    border-collapse:separate;
    text-align: center;
}
table td ,table th {
    border-bottom: dashed 1px #000;
}

border-collapse 屬性使用默認(rèn)值separate邊框會被分開，然后設(shè)置td/th的邊框。

查看

2018年8月17日 08:39