Question

我创建了这个表并将填充和边框设置为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代码：

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

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

Answer 1

将cellpadding="0"和cellspacing="0"添加到您的表格中：

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

或在CSS中：Set cellpadding and cellspacing in CSS?

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将CSS属性border-collapse添加到table。 E.g：

table#jobtable {
    border-collapse: collapse;
}

Answer 3

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

即可

#jobtabelle {
   border-collapse: collapse;
}

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

3 个答案: