html顶部table固定,CSS实现:固定Table表头和第一列

当表格内容太多的时候,固定表头不让标题滚出屏幕外,是一个很人性化的设计;而当横向项目内容太多时,固定第一列(项目列)也是一个很贴心的设计。本文介绍如何用CSS实现固定Table表头和第一列。

733bfb7be92540561c41c52bafb8df94.gif

固定Table表头和第一列

CSStable {

font-family: "Fraunces", serif;

font-size: 125%;

white-space: nowrap;

margin: 0;

border: none;

border-collapse: separate;

border-spacing: 0;

table-layout: fixed;

border: 1px solid black;

}

table td,

table th {

border: 1px solid black;

padding: 0.5rem 1rem;

}

table thead th {

padding: 3px;

position: sticky;

top: 0;

z-index: 1;

width: 25vw;

background: white;

}

table td {

bac

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现固定第一列固定表头的效果,需要使用CSS的position和overflow属性。具体来说,可以将表格包裹在一个div中,将div的position设为relative,然后将表头第一列分别放在两个div中,将它们的position设为absolute。接着,设置这两个div的宽度和高度,让它们固定在表格的左上角。最后,将表格的overflow设为auto,让它可以滚动。 下面是示例代码: HTML代码: ``` <div class="table-wrapper"> <div class="header-wrapper"> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> </table> </div> <div class="body-wrapper"> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> </table> </div> </div> ``` CSS代码: ``` .table-wrapper { position: relative; overflow: auto; } .header-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 40px; background-color: #fff; } .body-wrapper { position: absolute; top: 40px; left: 0; width: 100%; height: calc(100% - 40px); overflow-y: scroll; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; font-weight: bold; position: sticky; top: 0; z-index: 1; } td:first-child { position: sticky; left: 0; z-index: 1; background-color: #f2f2f2; } ``` 在上面的代码中,我们将表格包裹在一个名为.table-wrapper的div中。表头第一列分别放在.header-wrapper和.body-wrapper中。我们使用了position: sticky属性来实现固定表头第一列的效果。注意,在实现固定第一列时,我们需要将第一列的背景色设为表头的背景色,以避免出现重叠的情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值