html 如何不拉伸td,html - table 表格不被撑开,td某些列宽度固定某些列自适应

本文介绍了如何使用CSS实现表格的细边框效果,并确保表格宽度固定,即使内容过长也不会撑开单元格。通过`table-layout:fixed`和`word-break:break-all`属性,可以实现表格列宽的固定和按比例自适应。同时,展示了不同列宽设置(固定值和百分比)下的显示效果,适用于前端开发中对表格样式的精细控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,实现table细边框,设置如下css:

table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}

2,table表格宽度固定,同时td内容过长也不会被撑开,设置如下css:

table{table-layout:fixed;word-break:break-all;}

3,在上面css设置下,td的width可以设置固定值也可设置百分比,达到某些列宽度固定,某些列按比例自适应的效果。

table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}

50px50% aaaaaaabbbbbbbccccccc50% aaaaaaabbbbbbbccccccc50px100px
50px50% aaaaaaabbbbbbbccccccc50% aaaaaaabbbbbbbccccccc50px100px

效果:

50px

50% aaaaaaabbbbbbbccccccc

50% aaaaaaabbbbbbbccccccc

50px

100px

50px

50% aaaaaaabbbbbbbccccccc

50% aaaaaaabbbbbbbccccccc

50px

100px

html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值