Sea*_*ass 6 html javascript css html-table sticky
我有一个表,我想冻结前三列。它通过在列上设置来工作sticky,但这要求我也为它们设置固定的宽度/左侧,这是我想避免的。有没有办法将前三列分组并仅在该组上设置粘性?
这是不正确的,但也许可以让您了解我所追求的内容:
body {
font-family: 'Lucida Grande';
}
div {
width: 500px;
height: 200px;
overflow: scroll;
}
td,
th {
padding: 2px 5px;
white-space: nowrap;
}
colgroup {
position: sticky;
position: -webkit-sticky;
left: 0;
background: #569CA8;
color: white;
z-index: 1;
}Run Code Online (Sandbox Code Playgroud)
<div>
<table cellspacing="0">
<tbody>
<tr>
<colgroup>
<td>Sticky 1</td>
<td>Sticky 2</td>
<td>Sticky 3</td>
</colgroup>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
</tr>
<tr>
<colgroup>
<td>Sticky 1</td>
<td>Sticky 2</td>
<td>Sticky 3</td>
</colgroup>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
</tr>
</tbody>
</table>
</div>Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
406 次 |
| 最近记录: |