使用边框框样式化表头

Question

这是我想要的表格

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

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。