html - how can I add border to thead?

Question

I'm working on my project with flask and bootstrap.

The problem is, scrolled text pixel popped up above thead. like image below.

so I want to hide that by adding border to thead or making thead thicker than table row.

here's my html code(Since code is too long, I skipped almost and took screenshot):

and my css code for scrollable table and clickable row:

.tableFixHead          { overflow-y: auto; height: 400px; }
.tableFixHead thead th { position: sticky; top: 0; }

table  { border-collapse: collapse; height: 400px; width: 100%; }
th { padding: 8px 16px; }
th { background:#eee; }
td tr { padding: 0;}
tbody { height: 400px; width: 100%;}

.clickable-row {
    cursor: pointer;
}

how can I do?

++) added my html codes

                        <div class="tableFixHead">
                        <table class="table table-bordered table-sm table-hover">
                            <thead>
                            <tr class="thead-light border">
                                <th>??</th>
                                <th>??? ??</th>
                                <th>???</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if quest_list %}
                                {% for quest in quest_list %}
                                    <tr class="clickable-row">
                                        <td>{{ quest.location }}</td>
                                        <td>{{ quest.name }}</td>
                                        <td align="center">{{ quest.difficulty }}</td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <p>??? ??? ??? ? ????.</p>
                            {% endif %}
                            </tbody>
                        </table>
                        </div>

Answer 1

Try adding a top border to the th so it keeps its sticky positioning but looks thicker.

thead th {
   // use same background color to give illusion of no actual border
   border-top: 20px solid #eee;
   // if you want symmetry add 
   border-bottom: 20px solid #eee;
}