填坑之路：table 中单元格 td 定宽的一个解决思路

项目中需要对表格设置最大宽度，很久没动过表格了（是真怕table呀），硬着头皮上吧。

试了若干方法：从简单的对每个 td 设 width，再到加 class 写样式，发现都没起作用，因为 table 这东西的布局就是神奇：不管怎样，我就自适应，我就有容乃大。

网上看到很多帖子中都有这么一种解决方案，先对 table 设宽100%，然后设死固定宽，留下一列不设宽，如下：

<table style="width: 100%;" width="100%" border="1" cellpadding="0" cellspacing="0">
    <thead>
        <tr style="font-weight: bold;">
            <td width="200px">组件标识</td>
            <td width="200px">组件名称</td>
            <td width="100px">组件大小</td>
            <td>编译状态</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>eLearning订阅组件</td>
            <td>ele-subscriptiondadasdasdweadssssssssss</td>
            <td>2222222</td>
            <td>SUCCESS</td>
        </tr>
        <tr>
            <td>eLearning订阅组件sarfsafwsaafsfas</td>
            <td>ele-ssdweads</td>
            <td>2222222</td>
            <td>SUCCESS</td>
        </tr>
    </tbody>
</table>

看看效果：

方法1.png

ARE YOU KIDDING ? ? ?

这他么的也算是解决方案？

于是，屡遭挫折后就决定自己来吧。

猛地，一个思路锤了过来，既然 td 是可以设宽的，只是当表格内容的宽度大于设定宽度时，它才会发功自适应，那么我让 td 里面的内容不超过设定宽度不就行了？

那么，不就是随手加个 div，给个 max-width 不就解决了？

<table style="width: 100%;" width="100%" border="1" cellpadding="0" cellspacing="0">
    <thead>
        <tr style="font-weight: bold;">  //不用 th 是表头不要居中
            <td width="200px">组件标识</td>
            <td width="200px">组件名称</td>  // 已知这两列内容比较长，先设个定长
            <td>组件大小</td>
            <td>编译状态</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="max_width">eLearning订阅组件</div></td>
            <td><div class="max_width">ele-subscriptiondadasdasdweads</div></td>
            <td>2222222</td>
            <td>SUCCESS</td>
        </tr>
        <tr>
            <td><div class="max_width">eLearning订阅组件sarfsafwsaafsfas</div></td>
            <td><div class="max_width">ele-ssdweads</div></td>
            <td>2222222</td>
            <td>SUCCESS</td>
        </tr>
    </tbody>
</table>

再看看效果，完美听话了：

方法2.png

当然，设了max-width,超长部分我就给省略号了，然后，给 td 加个 title 显示全就 OK 了。