html/css 如何在标题上添加边框

Question

tr我想在的底部加一个边框thead。

我有如下表。我能够将边框放在ths 的底部。然而，这达不到我想要的，因为彼此交叉的两个边框仍然不是黑色的，如下图所示。

table {
    border-collapse: collapse;
}
table thead tr th {
  border-bottom: 1px solid #000000;
}

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

<table>
  <thead>
    <tr>
      <th>
        #
      </th>
      <th>
        Date
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        TUB1234
      </td>
      <td>
        2018/02/22
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这是一个工作示例：（
请注意，我更正了多个trs，我认为这是一个错误。）我使用 rgba 颜色作为和
的边框。 thtd

table{
    border-collapse: collapse;
}
table thead tr th{
    border-bottom: 1px solid #000000;
}
table th, table td {
    border-left: 1px solid rgba(0,0,0,0.2);
    border-right: 1px solid rgba(0,0,0,0.2);
}
table th, table td{ /* Added padding for better layout after collapsing */
    padding: 4px 8px;
}

<table>
    <thead>
        <tr>
            <th>
               #
            </th>
            <th>
               Date
            </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>
                TUB1234
            </td>
            <td>
                2018/02/22
            </td>
        </tr>
    </tbody>
</table>

这是另一个片段。
我不知道是否有办法改变它，但它使用您的示例显示哪些边框高于其他边框：

table{
    border-collapse: collapse;
}
table th, table td { /* Multicolored border */
    border: 1px solid;
    border-color: #f00 #0f0 #00f #f0f;
}
table th, table td{ /* Added padding for better layout after collapsing */
    padding: 4px 8px;
}

<table>
    <thead>
        <tr>
            <th>
               #
            </th>
            <th>
               Date
            </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>
                TUB1234
            </td>
            <td>
                2018/02/22
            </td>
        </tr>
    </tbody>
</table>

希望这可以帮助。