Unwanted table cell border

Question

table {
  border: solid 1px #eee;
  text-align: right;
}
tr,
td,
th {
  padding: 0;
  margin: 0;
  border: none;
}
th,
td {
  width: 90px;
  height: 24px;
  line-height: 24px;
  padding: 0;
}
th {
  background-color: #f4f4f4;
}
.first-col {
  text-align: left;
}

<table class="satisfaction">
  <tr>
    <th class="first-col">Kepuasan</th>
    <th>1 bulan</th>
    <th>6 bulan</th>
    <th>12 bulan</th>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-smile" src="img/icon/emoticon-happy.svg">Positif</span>
    </td>
    <td>9393</td>
    <td>9393</td>
    <td>9393</td>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-neutral" src="img/icon/emoticon-neutral.svg">Netral</span>
    </td>
    <td>93</td>
    <td>93</td>
    <td>93</td>
  </tr>
  <tr class="last-row">
    <td class="first-col"><span><img class="svg emo emo-frown" src="img/icon/emoticon-sad.svg">Negatif</span>
    </td>
    <td>39</td>
    <td>39</td>
    <td>39</td>
  </tr>
</table>

I made a table and I keep seeing this white separator on the first row.

I already done make all margin and padding to zero but it doesn't work. So far this is my styling

table {
    border: solid 1px #eee;
    text-align: right;
}

tr, td, th {
    padding: 0;
    margin: 0;
    border: none;
}

th, td {
    width: 90px;
    height: 24px;
    line-height: 24px;
    padding: 0;
}

th {
    background-color: #f4f4f4;
}

.first-col {
    text-align: left;
}

Is there anything I'm missing out? Any help appreciated!

Where's your HTML? Questions regarding code need a minimal, complete, verifiable example http://stackoverflow.com/help/mcve — Michael Coker, Jan 28 '17 at 16:42
@MichaelCoker I put it on the snippet. Thank you for reminding me :) — Dolorosa, Jan 28 '17 at 16:46
http://stackoverflow.com/questions/2039438/removing-unwanted-table-cell-borders-with-css — Michael Coker, Jan 28 '17 at 16:48

score 1 · Accepted Answer · answered Jan 28 '17 at 16:46

Looking at your posted CSS it seems likely that the 'border' is appearing because you haven't collapsed the cell-borders; so with that in mind I'd suggest you add the rule:

border-collapse: collapse;

to the CSS rules for the table element:

table {
    border-collapse: collapse;
    border: solid 1px #eee;
    text-align: right;
}

table {
  border-collapse: collapse;
  border: solid 1px #eee;
  text-align: right;
}
tr,
td,
th {
  padding: 0;
  margin: 0;
  border: none;
}
th,
td {
  width: 90px;
  height: 24px;
  line-height: 24px;
  padding: 0;
}
th {
  background-color: #f4f4f4;
}
.first-col {
  text-align: left;
}

<table class="satisfaction">
  <tr>
    <th class="first-col">Kepuasan</th>
    <th>1 bulan</th>
    <th>6 bulan</th>
    <th>12 bulan</th>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-smile" src="img/icon/emoticon-happy.svg">Positif</span>
    </td>
    <td>9393</td>
    <td>9393</td>
    <td>9393</td>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-neutral" src="img/icon/emoticon-neutral.svg">Netral</span>
    </td>
    <td>93</td>
    <td>93</td>
    <td>93</td>
  </tr>
  <tr class="last-row">
    <td class="first-col"><span><img class="svg emo emo-frown" src="img/icon/emoticon-sad.svg">Negatif</span>
    </td>
    <td>39</td>
    <td>39</td>
    <td>39</td>
  </tr>
</table>

References:

border-collapse.

Unwanted table cell border

1 Answers1