css边框没有显示但是应用了css

Question

我试图将边框应用于tr中的所有thead。

的CSS（触笔）：

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

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

Answer 1

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>

Answer 2

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>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Answer 3

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

border: 10px solid #000;