Table cells without borders having white lines - how do I disable them?

Question

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?

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

Possible duplicate of [Set cellpadding and cellspacing in CSS?](http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css) — showdev, Jan 06 '16 at 00:45

score 5 · Accepted Answer · edited May 23 '17 at 11:46

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

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

or in CSS: Set cellpadding and cellspacing in CSS?

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>

Your Welcome! You can also do it in CSS: http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css — CoderPi, Jan 05 '16 at 18:42

score 5 · Answer 2 · answered Jan 05 '16 at 18:37

5

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

table#jobtable {
    border-collapse: collapse;
}

answered Jan 05 '16 at 18:37

Tobias Baumeister

2,107
3
21
36

score 2 · Answer 3 · answered Jan 05 '16 at 18:40

2

Just move the border-collapse property to the table itself

#jobtabelle {
   border-collapse: collapse;
}

answered Jan 05 '16 at 18:40

Itamar Gronich

193
10

Table cells without borders having white lines - how do I disable them?

3 Answers3