Html 表格标题位置：粘性和边框问题

我有一个表，我正试图得到粘性标题，如下。“我的表格样式”的标题在顶部和底部都有边框

我不明白的是，应用于

th

的上/下边框与表的其余部分一起滚动，而不是停留在“卡住”的标题单元格中。对此有什么办法吗

工作样本可在此处找到：

名称
标题
身份证件
用户名
马尔科姆·雷诺兹
船长
9035749867
雷诺兹先生
...

您可以添加

.table {
  border-collapse: separate;
}

.table {
  border-collapse: separate;
  border-spacing: 0;
}

但不幸的是，它看起来很糟糕，更好的解决方案是使用伪元素添加一个变通方法

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

。表粘性容器{
高度：200px；
溢出y：滚动；
边框顶部：1px纯绿色；
边框底部：1px纯绿色；
}
.th桌{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
z指数：2；
}
th：之后，
th:以前{
内容：''；
位置：绝对位置；
左：0；
宽度：100%；
}
th:以前{
顶部：-1px；
边框顶部：1px纯红；
}
赛后{
底部：-1px；
底部边框：2倍纯红；
}

名称
标题
身份证件
用户名
马尔科姆·雷诺兹
船长
9035749867
雷诺兹先生
佐伊·沃什伯恩
大副
8908980980
茨瓦什伯恩
凯莉·弗莱
工程师
6678687678
kfrye
马尔科姆·雷诺兹
船长
9035749867
雷诺兹先生
佐伊·沃什伯恩
大副
8908980980
茨瓦什伯恩
凯莉·弗莱
工程师
6678687678
kfrye

（最新Chrome和FF测试）-用div包装th/td内容，并使用这些div边框而不是单元格边框

<div class="wrapper">
  <table>
  <thead>
    <tr>
      <th>
        <div class="cell">head1</div>
      </th>
      <th>
        <div class="cell">head2</div>
      </th>
      <th>
        <div class="cell">head3</div>
      </th>
      <th>
        <div class="cell">head4</div>
      </th>
      <th>
        <div class="cell">head5</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
      <td>
        <div class="cell">1</div>
      </td>
    </tr>
  </tbody>
</table>
</div>

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 500px;
}

.wrapper {
  height: 150px;
  overflow: auto;
}

td, th {
  width: 150px;
  height: 50px;
  text-align: center;
  font-size: 32px;
  padding: 0;
}

th {
  position: sticky;
  top: 0;
  left: 0;
  background-color: #fff;
}

.cell {
  border: 1px solid black;
  height: 100%;
}

td .cell {
  border-top: none;
  border-left: none;
}

th .cell {
  border-left: none;
}

td:first-child .cell,
th:first-child .cell {
  border-left: 1px solid black;
}

标题1
标题2
总目3
总目4
总目5
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
桌子{
边界塌陷：塌陷；
表布局：固定；
宽度：500px；
}
.包装纸{
高度：150像素；
溢出：自动；
}
td，th{
宽度：150px；
高度：50px；
文本对齐：居中；
字体大小：32px；
填充：0；
}
th{
位置：粘性；
排名：0；
左：0；
背景色：#fff；
}
.细胞{
边框：1px纯黑；
身高：100%；
}
td.细胞{
边界顶部：无；
左边界：无；
}
th.细胞{
左边界：无；
}
td：第一个孩子，手机，
第一个孩子。牢房{
左边框：1px纯黑；
}

您可以添加

.table {
  border-collapse: separate;
}

.table {
  border-collapse: separate;
  border-spacing: 0;
}

---

不要使用

边框折叠

并按如下方式绘制线条：

td, th {
    border-bottom: 1px solid grey;
    border-right: 1px solid grey;
}

table {
    border-spacing: 0px;
    border-left: 1px solid grey
}

th {
    background-color:#c5e8ec;
    position: sticky;
    position: -webkit-sticky;
    border-top: 1px solid grey;
    top:0;
}

---

这很有效。我注意到，不知何故，我可以在边框“应该”所在的空白处看到标题“后面”的内容。因此，我将“顶部”和“底部”设置为-1px。我添加了第二个解决方案宽度框阴影。我理解图形纯粹主义者；）正如@sarthakc所建议的，将第一个解决方案与

边界间距相结合：0而且看起来不错！第一种解决方案有什么问题，在我的项目中，我的一切都是一样的，但当我滚动站点时，thead是粘性的，但thead的背景色是最佳解决方案。这更好，你在标题后面看到的内容的效果非常小。我唯一的问题是，如果你的边框>1px，那么你的边框宽度就会有轻微的不一致。