这是一个带有固定行和列的表格。我也试图通过固定标题来改进它。 IE。当您滚动表格时，标题不应滚动 - 它应该永久可见。是否可以？
我已经尝试过了caption-side: top-outside, but:
-
top-outside仅适用于 Firefox。相反，我的目标浏览器是 Chrome。
- 看来它根本无法解决任务。
.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）
现在它正在工作
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
