一、場景重現
<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>