固定可滚动表的标题 [英] To pin the caption of the scrollable table
本文介绍了固定可滚动表的标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是带有固定行和列的表.我也试图通过固定标题来改善它. IE.滚动表格时,标题不应滚动-应该永久可见.有可能吗?
Here is a table with pinned row and column. I'm trying to improve it by pinning the caption as well. I.e. when you scroll the table, the caption should not be scrolled - it should be visible permanently. Is it possible?
我已经尝试过caption-side: top-outside
,但是:
-
top-outside
仅在Firefox中有效.相反,我的目标浏览器是Chrome. - 似乎根本无法解决任务.
top-outside
works in Firefox only. Instead, my target browser is Chrome.- It seems it simply don't solve the task.
.wrapper {
height: 200px;
overflow-x: auto;
width: 500px;
}
caption, th, p {
font-size: x-large;
}
caption {
text-align: left;
}
th {
background: rgba(255, 225, 225);
position: sticky;
top: 0;
}
th:first-of-type, td:first-of-type {
left: 0;
position: sticky;
}
th:first-of-type {
z-index: 2;
}
td:first-of-type {
background: rgba(225, 255, 225);
z-index: 1;
}
th, td p {
white-space: nowrap;
}
td p {
margin-top: 0;
}
td p:last-child {
margin-bottom: 0;
}
th, td {
border-bottom: 1px dashed red;
}
<div class="wrapper">
<table>
<caption>Caption</caption>
<thead>
<tr>
<th>Column 1 aaa aaa aaa</th>
<th>Column 2 bbb bbb bbb</th>
<th>Column 3 ccc ccc ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
</tbody>
</table>
</div>
推荐答案
.wrapper {
height: 200px;
overflow-x: auto;
width: 500px;
margin-top: 30px;
}
table {
margin-bottom: 0;
}
caption, th, p {
font-size: x-large;
}
caption {
text-align: left;
position: absolute;
z-index: 99;
margin-top: -68px;
display: table-header-group;
}
th {
background: rgba(255, 225, 225);
position: sticky;
top: 0;
}
th:first-of-type, td:first-of-type {
left: 0;
position: sticky;
}
th:first-of-type {
z-index: 2;
}
td:first-of-type {
background: rgba(225, 255, 225);
z-index: 1;
}
th, td p {
white-space: nowrap;
}
td p {
margin-top: 0;
}
td p:last-child {
margin-bottom: 0;
}
th, td {
border-bottom: 1px dashed red;
}
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<div class="outer">
<div class="wrapper">
<table>
<caption>Caption</caption>
<thead>
<tr>
<th>Column 1 aaa aaa aaa</th>
<th>Column 2 bbb bbb bbb</th>
<th>Column 3 ccc ccc ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
<tr>
<td><p>Column 1 aaa aaa aaa</p></td>
<td><p>Column 2 bbb bbb bbb</p></td>
<td><p>Column 3 ccc ccc ccc</p></td>
</tr>
</tbody>
</table>
</div>
</div>
这就是您想要实现的(在Chrome和Safari中可以使用) 现在可以了
This is what you want to achieve (works in Chrome and safari) Now it is working
这篇关于固定可滚动表的标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文