删除表格中 <th> 之间的白色边框答案

【问题标题】：Remove white border between <th> in table删除表格中 <th> 之间的白色边框
【发布时间】：2018-02-02 16:03:51
【问题描述】：

我有这张桌子

我想这样设置 th 但做不到。

有机会问一下，有没有人知道如何设置条纹的行，欢迎回答。

   <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

td{
  border: 1px solid #999;
  padding: 0.5rem;
}
th
{

background-color:#5e6196;
}

【问题讨论】：

标签： css html-table border

【解决方案1】：

使用 css 消除单元格间距：

table {
   border-spacing: 0;
   border-collapse: collapse;
}

并获得这些条纹：

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

Fiddle

【讨论】：

【解决方案2】：

你可以这样试试

<table cellspacing="0" cellpadding="0">

JSFIDDLE DEMO

或者你可以在你的 CSS 中添加它

table { border-collapse:collapse }

JSFIDDLE DEMO

【讨论】：