填坑之路: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 了。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,582评论 1 90
  • 前端07班 王 对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格!其实这只是针对使用HTML...
    爲wei阅读 2,005评论 0 5
  • 转载:http://www.cocoachina.com/swift/20161201/18198.html 前言...
    F麦子阅读 2,247评论 2 5
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,549评论 0 5
  • 复习完CSS后总结一下,首先看一下CSS的一个体系结构图: 大体上分为这八个部分,参考一下vivijind的css...
    苏敏阅读 125评论 0 3