By Ne0 — Dec 10, 2018

＜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前面加

<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>

一、场景重现

二、分析原因

You might also like...