HTML <table>标签编写后浏览器不显示单元格边框问题求助

问题原因 #

默认情况下，浏览器不会给<table>、<th>、<td>标签添加默认边框，你参考的旧版HTML书籍里的示例大概率是用了已淘汰的原生border属性，或是省略了配套的CSS样式说明，所以直接抄写结构代码就会出现看不到边框的情况。

方案1：使用HTML原生border属性（适配旧教程，快速验证效果） #

直接给<table>标签添加border="1"属性即可，修改后的代码如下：

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jake</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
  </tbody>
</table>

这个方案可以快速跑出和旧教程一致的效果，但属于过时写法，实际项目不推荐使用。

方案2：使用CSS实现边框（当前标准推荐写法） #

通过添加样式控制边框效果，还能自定义边框粗细、颜色，同时可以用border-collapse: collapse属性合并相邻单元格的边框，避免出现双边框的问题，示例代码如下：

<style>
  table, th, td {
    border: 1px solid #000;
    border-collapse: collapse;
  }
</style>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jake</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
  </tbody>
</table>

如果不需要合并边框，删掉border-collapse: collapse这一行即可。

内容的提问来源于stack exchange，提问作者Jake Kim