Kevmon Kevmon - 2 months ago 5
CSS Question

Cannot Remove Border in a Table

Please help, I can't figure out how to get rid of this border underline. It's nowhere to be found in Chrome's Inspect. I've tried everything I could find in the forums but no luck so far.

I'm unable to reproduce it using a fiddle, but here's the live site

enter image description here

HTML

<table class="table table-1" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="table-header cell-left">Actives</th>
<th class="table-header cell-right">Percentage (%)</th>
</tr>
<tr>
<td class="table-data cell-left">Caster Oil</td>
<td class="table-data cell-right">25</td>
</tr>
<tr>
<td class="table-data cell-left">Peppermint Oil</td>
<td class="table-data cell-right">0.5</td>
</tr>
<tr>
<td class="table-data cell-left">Cinnamon Oil</td>
<td class="table-data cell-right">0.25</td>
</tr>
</table>


CSS

.table {
color: $Blue;
border: none;
border-collapse: collapse;
border-spacing: 0;
background-color: white;
}
th {
font-family: 'PPsans', Fallback, sans-serif;
font-size: 15px;
text-transform: uppercase;
}
td {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: capitalize;
padding: 5px 0;
}
.cell-right {text-align:right;}
.cell-left {text-align: left;}

Answer

You have tr:first-child th:after, tr:first-child td:after with border-bottom: 1px solid #1c1d1d; which creates that border.

You can override this using:

tr:first-child th:after, tr:first-child td:after {
    border: none;
}

Make sure this goes after the previous code (or edit the original css file).