删除 table 中 <th> 之间的白色边框

Question

我有这个table

我想这样设置，但是做不到。

趁机问一下，有谁知道如何设置条纹行欢迎回答

   <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;
}

Answer 1

你可以这样试试

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

JSFIDDLE DEMO

或者您可以将此添加到您的 CSS

table { border-collapse:collapse }

JSFIDDLE DEMO

Answer 2

使用css去除单元格间距：

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

并获得这些条纹：

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

Fiddle

删除 table 中 <th> 之间的白色边框

Remove white border between <th> in table

css

html-table

border