<table/>设置列宽度无效的问题
生活随笔
收集整理的這篇文章主要介紹了
<table/>设置列宽度无效的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、場景重現
<html> <head><title>測試</title><style type="text/css">.table {table-layout: fixed;}</style> </head> <body> <div style="width: 100%"><table class="table" style="width: 100%"><thead><tr><th colspan="7" style="background-color: #2f96b4">地址情況</th></tr><tr><th style="width: 80px;">國家</th><th style="width: 80px;">省份</th><th style="width: 80px;">城市</th><th style="width: 80px;">區</th><th style="width: 80px;">街道</th><th style="width: 500px;">居委會</th><th style="width: 80px;">門牌號</th></tr></thead><tbody><tr style="text-align:center"><td>中國</td><td>廣東</td><td>廣州</td><td>天河</td><td>五山</td><td><pre style="word-break: break-all">天河中學高中部隔壁的小區</pre></td><td><pre >aa</pre></td></tr></tbody></table> </div> </body> </html>運行結果:
期待結果:
?
二、分析原因
如果對<table/>設置table-layer:fixed樣式后,列寬會平均化,對列<th/>的寬度設置會失效。
解決方法:?
在tbody前面加
?
總結
以上是生活随笔為你收集整理的<table/>设置列宽度无效的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JSP的<c:foreach/>标签只输
- 下一篇: 2个相见恨晚的浏览器插件2个相见恨晚的浏