html - 使用边框框设计表格标题

Question

这是我想要的 table 风格

标题行在底部有一个边框。这是我的 table

table {
  border: 1px solid #bbbbbb;
}

th {
  border-bottom: 1px solid #bbbbbb;
}

<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Bar</td>
  </tr>
</table>

如您所见，水平线是虚线。我怎样才能得到一个完整的行？我尝试将标题表行的样式设置为

#header{
  border-bottom: 1px solid #bbbbbb;
}

<table>
  <tr id="header">
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
</table>

但是什么也没有发生。

Answer 1

编辑您的 CSS，使其看起来像这样:

table {
  border: 1px solid #bbbbbb;
  border-spacing: 0
}

th {
  border-bottom: 1px solid #bbbbbb;
}

<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Bar</td>
  </tr>
</table>

添加的部分是border-spacing。