如何为头添加边框？

问题描述

我正在使用 Flask 和 Bootstrap 处理我的项目。

问题是，滚动的文本像素在顶部弹出。如下图。

所以我想通过为 thead 添加边框或使 thead 比表格行更粗来隐藏它。

这是我的HTML代码（由于代码太长，我几乎跳过并截图）：

和我的可滚动表格和可点击行的 css 代码：

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

我该怎么办？

++) 添加了我的 html 代码

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

解决方法

尝试在 th 上添加一个顶部边框，使其保持粘性定位但看起来更粗。


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

.tableFixedHead table thead th {

边框：5px 实心 #eee; }

html twitter-bootstrap