table-layout: fixed失效问题

本文探讨了固定表格布局(table-layout:fixed)在提高浏览器渲染效率方面的作用,以及当表格第一行存在colspan合并单元格时可能导致的问题。通过使用col标签预先设定列宽,可以解决列宽不一致的问题,确保表格布局的稳定性。示例代码展示了如何在固定表格布局中利用col标签设置列宽。
摘要由CSDN通过智能技术生成

固定表格布局: fixed

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

对表格设置table-layout:fixed属性以后,如果表格的第一行tr中的td设置过单元格合并,后面tr中的td无论如何设置宽度都没有任何效果

这里因为第一行是标题,使用了colspan合并了单元格,导致了table-layout: fixed失效,列宽度不一致

<div style="max-height: 70vh;width: ${reportList?size*100+400}px;overflow-y: auto;"
     class="fixed-table-container">
    <table class="table table-hover table-striped"
           style="table-layout: fixed;width: ${reportList?size*100+400}px;">
        <tr class="bold_img" style="background:rgb(55, 140, 214);color:white;font-weight:bold;">
            <th class="text-center" colspan="${reportList?size+ 2}">小游戏完成圈数情况</th>
        </tr>
        ...表格循环生成
    </table>
</div>

通过col标签为后续每列设定固定的宽度

在html中,col标签是使用来为表格中一个或多个列定义属性值,通过该标签可以同时给整个列应用样式,不需要重复为每个单元格或每一行设置样式

<div style="max-height: 70vh;width: ${reportList?size*100+400}px;overflow-y: auto;"
     class="fixed-table-container">
    <table class="table table-hover table-striped"
           style="table-layout: fixed;width: ${reportList?size*100+400}px;">
        此处设定后续每列固定宽度
        <tr>
            <col width="200"/>
            <#list reportList as rl >
                <col width="100"></col>
            </#list>
            <col width="180"/>
        </tr>
        <tr class="bold_img" style="background:rgb(55, 140, 214);color:white;font-weight:bold;">
            <th class="text-center" colspan="${reportList?size+ 2}">小游戏完成圈数情况</th>
        </tr>
        ...表格循环生成
    </table>
</div>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值