L. Kel L. Kel - 2 months ago 6
CSS Question

HTML CSS Mysterious Bottom Border

I was building some tables and went through a lot of iterations. At some point I picked up this weird bottom border on my first row (https://jujusupply.com/pages/customer-gift-notes) and I'm not sure where it's coming from or how to get rid of it? It's just a very simple HTML table.



table {
width: 100%;
}
td {
text-align: center;
font-size: em(14px);
font-style: italic;
padding: 12px;
background-color: #eeeeee;
border: 8px solid white;
height: 200px;
}
td:hover {
background-color: #ffde17;
}

<div style="overflow-x: auto;">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>




Answer

It's from here :

media="all"
tr:first-child th:after, tr:first-child td:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: -15px;
    right: 15px;
    border-bottom: 1px solid #1c1d1d;
}

in the theme.scss.css file

Comments