css 边框未显示，但已应用 css

Question

我正在尝试为 thead 中的所有 tr 添加边框。

Css(手写笔):

table
    thead
        tr
          border: solid #000;
          border-width: 0 10px;

根据 chrome 应用了样式，但实际上并没有显示边框：

Answer 1

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>0</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr>
      <td>February</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

我不是css高手，但我通常在一行中写边框属性：

border: 10px solid #000;

Answer 3

tr 需要其 table 具有 border-collapse: collapse 才能使边框工作

table.first {
    border-collapse: separate;     /*  property default  */
}
table.second {
    border-collapse: collapse;
}

table thead tr {
    border-bottom: 2px solid gray;
}

/*  for this demo only  */
div {
  margin: 25px 20px 10px;
  text-decoration: underline;
}

<div>This table's tr (in thead) has no border</div>

<table class="first">
  <thead>
    <tr>
      <td>Left Head</td>
      <td>Right Head</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Left</td>
      <td>Right</td>
    </tr>
  </tbody>
</table>

<div>This table's tr (in thead) has border</div>

<table class="second">
  <thead>
    <tr>
      <td>Left Head</td>
      <td>Right Head</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Left</td>
      <td>Right</td>
    </tr>
  </tbody>
</table>

css 边框未显示，但已应用 css

css border not showing but css is applied

html

css

border