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

I created this table and set padding and border to 0. But there are this weird white lines around the cells. What is this and how do I disable them?

我创建了这个表,并将填充和边框设置为0.但是细胞周围有这种奇怪的白线。这是什么以及如何禁用它们?

HTML Code:

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

(The table is just repeating with more rows.)

(该表只是重复更多行。)

CSS Code:

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

(I changed the background of <td> to grey via Safari Dev Tools so the lines are easier to see.)

(我通过Safari Dev Tools将的背景更改为灰色,因此更容易看到线条。)

3 个解决方案

#1

Add cellpadding="0" and cellspacing="0" to your table:

将cellpadding =“0”和cellspacing =“0”添加到您的表中:

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

or in CSS: Set cellpadding and cellspacing in CSS?

或者在CSS中:在CSS中设置cellpadding和cellspacing?

Demo:

#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>

#2

Add the CSS attribute border-collapse to your table. E.g.:

将CSS属性border-collapse添加到表中。例如。:

table#jobtable {
    border-collapse: collapse;
}

#3

Just move the border-collapse property to the table itself

只需将border-collapse属性移动到表本身即可

#jobtabelle {
   border-collapse: collapse;
}