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

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

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

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

    

        

            
组件标识
            
组件名称
            
组件大小
            
编译状态
        
    
    

        

            
eLearning订阅组件
            
ele-subscriptiondadasdasdweadssssssssss
            
2222222
            
SUCCESS
        
        

            
eLearning订阅组件sarfsafwsaafsfas
            
ele-ssdweads
            
2222222
            
SUCCESS
        
    

看看效果：

方法1.png

ARE YOU KIDDING ? ? ?

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

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

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

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

  //不用 th 是表头不要居中
              // 已知这两列内容比较长，先设个定长
            

    

        
组件标识
            
组件名称
组件大小
            
编译状态
        
    
    

        

            
eLearning订阅组件
            
ele-subscriptiondadasdasdweads
            
2222222
            
SUCCESS
        
        

            
eLearning订阅组件sarfsafwsaafsfas
            
ele-ssdweads
            
2222222
            
SUCCESS
        
    

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

方法2.png

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