我正在处理HTML表的冻结左列。我尝试了有关STO的各种建议方法,但都不适合我。然后,我使用2个相同样式的HTML表重新创建了它。虽然,我取得了一些成功,但还不是很完美。我无法解决它。我想坚持使用纯CSS来实现它。
这是我的代码:
#tb_wrapper {
border:1px solid red;
position:relative;
max-width:960px;
}
#fixed_tb_wrapper {
position:absolute;
left:0;
top:0;
z-index:99999;
}
#scrollable_tb_wrapper {
border:1px solid #cccccc;
z-index:-99999;
}
.tb_records1 {
border-collapse:separate;
border-spacing:0;
text-align:center;
}
.tb_records1 th {
background-color:#5F5F5F;
color:#FFFFFF;
font-weight:bold;
}
.tb_records1 th, .tb_records1 td {
padding:10px;
border:1px solid #000000;
font-size:15px;
}
.tb_records1 tr:nth-child(even) {
background-color:#F2F2F2;
}
.tb_records1 tr:hover {
background-color:#F5F5F5;
}
.tb_responsive {
overflow-x:auto;
overflow-y:hidden;
}
.tb_records2 {
border-collapse:separate;
border-spacing:0;
text-align:center;
white-space:nowrap;
width:100%;
}
.tb_records2 th {
background-color:#5F5F5F;
color:#FFFFFF;
font-weight:bold;
}
.tb_records2 th, .tb_records2 td {
padding:10px;
border:1px solid #000000;
font-size:15px;
}
.tb_records2 tr:nth-child(even) {
background-color:#F2F2F2;
}
.tb_records2 tr:hover {
background-color:#F5F5F5;
}
<div id="tb_wrapper">
<div id="fixed_tb_wrapper" style="border:1px solid red;">
<table class="tb_records1">
<tr>
<th>Post ID</th>
</tr>
<tr>
<td>This is a long Post ID</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</div>
<div id="scrollable_tb_wrapper" style="border:1px solid blue;">
<div class="tb_responsive">
<table class="tb_records2">
<tr>
<th>Post Name</th>
<th>Post URL</th>
<th>Post Title</th>
<th>Post Heading</th>
<th>Post Content</th>
<th>Post Date Published</th>
<th>Post Date Modified</th>
<th>Post Image</th>
<th>Post Views</th>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
<tr>
<td>My Post</td>
<td>my-post</td>
<td>My Post</td>
<td>My Post</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>2017-07-21 13:58:16</td>
<td>2019-07-30 22:38:36</td>
<td>my-post.jpg</td>
<td>7</td>
</tr>
</table>
</div>
</div>
</div>
您会看到第一个具有单列“帖子ID”的表是固定的,右表在其下滚动。但是我有两个问题:
可滚动表的内容在第一个固定表(列)下可见。我使用了z-index,但没有效果。不知道为什么吗
是否需要给第一张固定桌子固定的宽度?然后等于左滚动条到右滚动表?如果是这样,那么似乎可行,但这将是唯一的最佳解决方案吗?
最佳答案
纯CSS解决方案
解决方案1
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}
<div>
<table>
<tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table>
</div>
解决方案2
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>