Unwanted table cell border [duplicate] - html

Question

This question already has answers here:
Removing unwanted table cell borders with CSS
(8 answers)
Closed 6 years ago.
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!

Answer 1

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.