一、场景重现
<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前面加
<colgroup><col style="width: 100px;"/><col style="width: 100px;"/><col style="width: 100px;"/><col style="width: 150px;"/><col style="width: 100px;"/><col style="width: 500px;"/><col style=""/>
</colgroup>