CODEWITHSUNDEEP
htmlcss
Kevmon
Kevmon

Reputation: 1005

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

Upvotes: 1

Views: 858

Answers (2)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

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

if you have custom css file then use !important

Upvotes: 0

Dekel
Dekel

Reputation: 62676

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

Upvotes: 3

Related Questions