无边框的表格单元格上有白线-如何禁用它们？

Question

我创建了此表，并将padding和border设置为0。但是在单元格周围有这条奇怪的白线。这是什么？如何禁用它们？

HTML代码：

    <table id="jobtabelle">
  <thead>
    <tr>
      <th>
        <button id="addbutton" class="left"><i class="material-icons">add</i></button>
      </th>
      <th></th>
      <th>Job</th>
      <th>Länge/mm</th>
      <th>Gesamt/QTY</th>
      <th>Rest/QTY</th>
      <th>Fertig um</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Job1</td>
      <td>800.000</td>
      <td>50</td>
      <td>20</td>
      <td>14:40</td>
      <td>
        <button id="" class="left"><i class="material-icons">more_horiz</i></button>
      </td>
    </tr>
    <tr>

（该表只是在重复更多行。）

CSS代码：

    <table id="jobtabelle">
  <thead>
    <tr>
      <th>
        <button id="addbutton" class="left"><i class="material-icons">add</i></button>
      </th>
      <th></th>
      <th>Job</th>
      <th>Länge/mm</th>
      <th>Gesamt/QTY</th>
      <th>Rest/QTY</th>
      <th>Fertig um</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Job1</td>
      <td>800.000</td>
      <td>50</td>
      <td>20</td>
      <td>14:40</td>
      <td>
        <button id="" class="left"><i class="material-icons">more_horiz</i></button>
      </td>
    </tr>
    <tr>

（我<td>通过Safari Dev Tools 将的背景更改为灰色，因此线条更易于查看。）

Answer 1

在表中添加cellpadding="0"和cellspacing="0"：

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

还是在CSS中：在CSS中设置cellpadding和cellspacing？

演示：

#jobtabelle tr {
  height: 56px;
  line-height: 56px;
  border-top: 0;
  border-bottom: solid 1px #424242;
  overflow: hidden;
  font-size: 16px;
}
#jobtabelle tbody tr:first-child {
  background: #66bb6a;
}
#jobtabelle thead tr {
  height: 25px;
  line-height: 25px;
  margin-top: 10px;
}
#jobtabelle td {
  border-left: 0;
  border-right: 0;
  border-bottom: inherit;
  padding: 0;
  border-collapse: collapse;
}
#jobtabelle th:first-child +th +th +th,
#jobtabelle th:first-child +th +th +th +th,
#jobtabelle th:first-child +th +th +th +th +th,
#jobtabelle th:first-child +th +th +th +th +th +th,
#jobtabelle td:first-child +td +td +td,
#jobtabelle td:first-child +td +td +td +td,
#jobtabelle td:first-child +td +td +td +td +td,
#jobtabelle td:first-child +td +td +td +td +td +td {
  text-align: right;
}

<table id="jobtabelle" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>
        <button id="addbutton" class="left"><i class="material-icons">add</i>
        </button>
      </th>
      <th></th>
      <th>Job</th>
      <th>Länge/mm</th>
      <th>Gesamt/QTY</th>
      <th>Rest/QTY</th>
      <th>Fertig um</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Job1</td>
      <td>800.000</td>
      <td>50</td>
      <td>20</td>
      <td>14:40</td>
      <td>
        <button id="" class="left"><i class="material-icons">more_horiz</i>
        </button>
      </td>
    </tr>
    <tr>
  </tbody>
</table>

Answer 2

将 CSS 属性添加border-collapse到您的table. 例如：

table#jobtable {
    border-collapse: collapse;
}