Question

FireFox border-collapse: collapse;出现问题，即使在100％变焦时线条粗细也会随机变化。这是我唯一想到的就是创建一个遍布1px边框的表格。但这很难看。还有更好的方法吗？

table {
    border-collapse: separate;
    border-spacing: 0px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

table td {
    border-left: 1px solid black;
    border-top: 1px solid black;
}

<table>
    <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
    </tr>
</table>

Answer 1

试试这个：https://jsfiddle.net/n00du841/

<table>
  <tr>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
  </tr>
</table>

CSS

table {
  border-collapse: separate;
  border-spacing: 0px;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

Answer 2

这很有效，但在Angular中动态隐藏表列时会导致问题。

table {
    font-size: inherit;
    border-collapse: separate;
    border-spacing: 0;
}

td, th {
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
    min-width: 10px;
    empty-cells: show;
}

table.border td, table.border th {
    border-left: solid 1px #808080;
    border-top: solid 1px #808080;
    border-right: none;
    border-bottom: none;
}

table.border tr th:last-child, table.border tr td:last-child {
    border-right: solid 1px #808080 !important;
}

table.border tr:last-child th, table.border tr:last-child td {
    border-bottom: solid 1px #808080 !important;
}

Answer 3

将边框类添加到HTML表

<table class="border">

以下CSS应该可以正常工作

table.border {
    border-left: solid 1px #eee;
    border-top: solid 1px #eee;
}

table.border td, table.border th {
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
}

FireFox中真正的1px桌面边框？

3 个答案: