HTML CSS 神秘底部边框

Question

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 1

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