本文介绍了主题表中带有多行的粘性标题表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我能够创建一个粘性标头表，并且工作正常.问题是，我需要用多行标题制作另一个表，并且到目前为止，我使用的方法不起作用，如下面的代码所示.
.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>这篇关于主题表中带有多行的粘性标题表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！