Table 边框未显示

Question

我正在尝试设置 table 的样式，但未显示边框。我以前从未遇到过这种情况，所以我不知道该怎么办。

这是我的 table:

<table class="table">
  <thead>
    <tr>
      <th>Dessert (100g serving)</th>
      <th>Calories</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dessert (100g serving)</td>
      <td>Calories</td>
    </tr>
  </tbody>
</table>

这是我的少：

@dark-text: rgba(0,0,0,0.87);
@dark-text-secondary: rgba(0,0,0,0.54);
@dark-text-disabled: rgba(0,0,0,0.26);

.table {
    z-index: 10;

    thead {
        tr {
            border-bottom: 3px solid @dark-text-disabled;
            z-index: 10;

            th {
                color: @dark-text-secondary;
                z-index: 10;
            }
        }
    }

    tbody {
        tr {
            border-bottom: 3px solid @dark-text-disabled;
            z-index: 10;

            td {
                z-index: 10;
            }
        }
    }
}

http://codepen.io/anon/pen/JdOaVO

Answer 1

要么将 border-bottom 规则移动到 th 和 td 标签，要么使用 collapsing border model (border-collapse: collapse;) 作为 .table

.table {
    border-collapse: collapse;
}

http://codepen.io/anon/pen/BNmOgg

Table 边框未显示

Table borders not showing up

html

css

less