Position Sticky 不适用于表格边界属性答案

【问题标题】：Position Sticky doesn't work with table th border propertyPosition Sticky 不适用于表格边界属性
【发布时间】：2021-08-13 00:56:32
【问题描述】：

我试图将thead 保持在一个粘性位置。它可以工作，但边框仍在滚动而不处于粘性状态。如何解决问题？

这是我的代码：

table{
  border-collapse: collapse;
  border:1px solid gray;
  width: 100%;
}

th{
  text-align: left;
   border-bottom: 1px solid black;
}

.container{
  overflow-y: auto;
  height: 200px;;
  background-color: yellow;
}

thead {
  position: sticky;
  top: 0;
  background-color: yellow;
 
}

<!doctype html>

<html>

<head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
</head>

<body>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>Column 1 </th>
                    <th>Column 2 </th>
                    <th>Column 3 </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Live Demo

【问题讨论】：

因为你的border-collapse: collapse。删除那条线，边框就会粘住。
这能回答你的问题吗？ Border style do not work with sticky position element

标签： html css

【解决方案1】：

您可以使用::before 和::after 选择器来添加边框。

table {
  border-collapse: collapse;
  border: 1px solid gray;
  border-top: none;
  width: 100%;
}

th {
  text-align: left;
  border-bottom: 1px solid black;
}

.container {
  overflow-y: auto;
  height: 200px;
  background-color: yellow;
}

thead {
  position: sticky;
  top: 0;
  background-color: yellow;
}

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

thead::before {
  top: 0;
  border-top: 1px solid gray;
  margin-top: -0.5px;
}

thead::after {
  bottom: 0;
  border-bottom: 1px solid gray;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
</head>

<body>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Column 1 </th>
          <th>Column 2 </th>
          <th>Column 3 </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

【讨论】：

@RaeeshAlam 已修复。谢谢！

【解决方案2】：

在thead 元素中，您可以使用box-shadow 属性和border-bottom 作为透明属性。
看看下面的 sn-p 希望对你有很大帮助。

table{
  border-collapse: collapse;
  border:1px solid gray;
  width: 100%;
}
th{
  text-align: left;
}
.container{
  overflow-y: auto;
  height: 200px;;
  background-color: yellow;
}
thead {
  position: sticky;
  top: 0;
  background-color: yellow;
  border-bottom: transparent;
  box-shadow: 0 0px 0.5px 1px gray;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Column 1 </th>
        <th>Column 2 </th>
        <th>Column 3 </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案3】：

在表格 CSS 中使用 border-collapse: separate; 而不是 border-collapse: collapse;

【讨论】：