是否可以创建一个带有多个行的粘性表标题？

时间：2019-07-09 07:08:32

标签： html css

给定表提供了包含多个行的表头。我已经有一个用于创建带有粘性表头的表的功能示例，但是，在头中使用多行时，此解决方案将无法实现，因为某些单元格会在其他单元格后面消失。

Sticky table：

.example {
  padding: 5px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: #afc8f0;
  text-align: center;
}

thead th {
  position: sticky;
  top: -1px;
  background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th scope="col" rowspan="2">#</th>
            <th scope="col" colspan="2">Group 1</th>
            <th scope="col" colspan="2">Group 2</th>
            <th scope="col" rowspan="2">Handle</th>
          </tr>
          <tr>
            <th>
              First
            </th>
            <th>
              Last
            </th>
            <th>
              First
            </th>
            <th>
              Last
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

    </div>
  </div>
</div>

根据我上面的代码的行为，表头单元格“ Group 1”和“ Group 2”将消失在下一行的单元格后面。

如何避免这种情况发生？

2 个答案:

答案 0 :(得分：1)

尝试在CSS中进行以下更改：

.example {
  padding: 5px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: #afc8f0;
  text-align: center;
}

thead tr#row1 th {
  position: sticky;
  top: -1px;
  background-color: #afc8f0;
}
thead tr#row2 th{
  position: sticky;
  top: 30px;
  background-color: #afc8f0;
}

也更新您的html文件                                         

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr id="row1">
          <th></th>
            <th scope="col" colspan="2">Group 1</th>
            <th scope="col" colspan="2">Group 2</th>
            <th></th>
          </tr>
          <tr id="row2">
          <th>#</th>
            <th>
              First
            </th>
            <th>
              Last
            </th>
            <th>
              First
            </th>
            <th>
              Last
            </th>
          <th>Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

    </div>
  </div>
</div>

这是您的解决方案的fiddle。

答案 1 :(得分：0)

您可以在第二行元素中添加一个类并添加一个最高值：

return (...)
.example {
  padding: 5px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: #afc8f0;
  text-align: center;
}

thead th {
  position: sticky;
  top: -1px;
  background-color: #fff;
}

.second-row { 
  top: 34px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th scope="col" rowspan="2">#</th>
            <th scope="col" colspan="2">Group 1</th>
            <th scope="col" colspan="2">Group 2</th>
            <th scope="col" rowspan="2">Handle</th>
          </tr>
          <tr>
            <th class="second-row">
              First
            </th>
            <th>
              Last
            </th>
            <th class="second-row">
              First
            </th>
            <th class="second-row">
              Last
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td></td>
            <td></td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td></td>
            <td></td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td></td>
            <td></td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

    </div>
  </div>
</div>
.example {
  padding: 5px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: #afc8f0;
  text-align: center;
}

thead th {
  position: sticky;
  top: -1px;
  background-color: #fff;
}

相关问题
最新问题