时间戳

首页 > 解决方案 > Position Sticky 不适用于表格边界属性

html - Position Sticky 不适用于表格边界属性

问题描述

我试图将其保持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>

现场演示

标签： htmlcss

解决方案

您可以使用::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>

推荐阅读