主题表中带有多行的粘性标题表 [英] Sticky header table with mutiple lines in the thead

问题描述

因此，我能够创建一个粘性标头表，并且工作正常.问题是，我需要用多行标题制作另一个表，并且到目前为止，我使用的方法不起作用，如下面的代码所示.

  .table-wrapper {职位:相对溢出-y:自动;高度:200px；宽度:200像素；}桌子 {边框:1px实线#DDD；垂直对齐:中间；文本对齐:居中；边界崩溃:崩溃；边框间距:0}桌子表tr td {边框:1px实线#DDD；背景颜色:#FFF;填充:4px；}桌子上的广告{位置:粘性；最高:0;}  

 < div class ="table-wrapper">< table>< thead>< tr>< th rowspan ="2">标头</th>< th colspan ="2"> Colspan列</th></tr>< tr>< th>一种</th>< th>乙</th></tr></thead>< tbody>< tr>< td>第1行</td>< td> a</td>< td> b< td></tr>< tr>< td>第2行</td>< td> a</td>< td> b< td></tr>< tr>< td>第3行/td< td> a</td>< td> b< td></tr>< tr>< td>第4行</td>< td> a</td>< td> b< td></tr>< tr>< td>第5行/td< td> a</td>< td> b< td></tr>< tr>< td>第6行</td>< td> a</td>< td> b< td></tr>< tr>< td>第7行</td>< td> a</td>< td> b< td></tr>< tr>< td>第8行</td>< td> a</td>< td> b< td></tr>< tr>< td>第9行</td>< td> a</td>< td> b< td></tr>< tr>< td>第10行/td>< td> a</td>< td> b< td></tr></tbody></table></div>  

是否可以仅使用CSS达到我想要的?

这是笔 https://codepen.io/criscoder/pen/KJNGqj

解决方案

您快到了，您可以在< th> 中简单地嵌入一个表，然后以这种方式添加其他行./p>

  .table-wrapper {职位:相对溢出-y:自动;高度:200px；宽度:200像素；}桌子 {边框:1px实线#DDD；垂直对齐:中间；文本对齐:居中；边界崩溃:崩溃；边框间距:0}桌子表tr td {边框:1px实线#DDD；背景颜色:#FFF;填充:4px；}桌子上的广告{位置:粘性；最高:0;}  

 < div class ="table-wrapper">< table>< thead>< tr>< th rowspan ="2" colspan ="1">标头</th>< th rowspan ="2" colspan ="2">< table>< tr>< td colspan ="2"> Colspan列</td></tr>< tr>< td colspan ="1"> A</td>< td colspan ="1"> B</td></tr></table></th></tr></thead>< tbody>< tr>< td>第1行</td>< td> a</td>< td> b</td></tr>< tr>< td>第2行</td>< td> a</td>< td> b< td></tr>< tr>< td>第3行/td< td> a</td>< td> b</td></tr>< tr>< td>第4行</td>< td> a</td>< td> b< td></tr>< tr>< td>第5行/td< td> a</td>< td> b< td></tr>< tr>< td>第6行</td>< td> a</td>< td> b< td></tr>< tr>< td>第7行</td>< td> a</td>< td> b< td></tr>< tr>< td>第8行</td>< td> a</td>< td> b< td></tr>< tr>< td>第9行</td>< td> a</td>< td> b</td></tr>< tr>< td>第10行/td>< td> a</td>< td> b< td></tr></tbody></table></div>  

So I'm able to create a sticky header table and it works fine. The problem is that I need to make another table with a multiline header and the approach I've used so far is not working, as you can see in the code bellow.

.table-wrapper {
  position: relative;
  overflow-y: auto;
  height: 200px;
  width: 200px;
}

table {
  border: 1px solid #DDD;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0
}

table tr th,
table tr td{
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 4px;
}

table thead tr th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th rowspan="2">
          Header
        </th>
        <th colspan="2">Colspan column</th>
      </tr>
      <tr>
        <th>
          A
        </th>
        <th>
          B
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Line 1</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 2</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 3</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 4</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 5</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 6</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 7</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 8</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 9</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 10</td>
        <td>a</td>
        <td>b</td>
      </tr>
    </tbody>
  </table>
</div>

Is it possible to achive what I want using CSS only?

Here's the pen https://codepen.io/criscoder/pen/KJNGqj

解决方案

You're nearly there, you could simply embed a table within your <th> and add additional rows that way.

.table-wrapper {
  position: relative;
  overflow-y: auto;
  height: 200px;
  width: 200px;
}

table {
  border: 1px solid #DDD;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0
}

table tr th,
table tr td{
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 4px;
}

table thead tr th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th rowspan="2" colspan="1">
          Header
        </th>
        <th rowspan="2" colspan="2">
        <table>
        <tr>
          <td colspan="2">Colspan column</td>
        </tr>
        <tr>
          <td colspan="1">A</td>
          <td colspan="1">B</td>
        </tr>
        </table>
        </th>
      </tr>
      
    </thead>
    <tbody>
      <tr>
        <td>Line 1</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 2</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 3</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 4</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 5</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 6</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 7</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 8</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 9</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 10</td>
        <td>a</td>
        <td>b</td>
      </tr>
    </tbody>
  </table>
</div>

这篇关于主题表中带有多行的粘性标题表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！