问题描述

css 中table的列宽怎样动态设置？

css 中table的列宽怎样取外界div宽度与列中内容长度的最大值？


如上图，未对table的列宽做设置，当列中内容很长超出外界div宽度时，出现滚动条，
显示正常，但当列中内容长度小于外界div宽度时，蓝色阴影只是内容的长度，不能填充整行。求大神们帮忙解答一下，谢谢~~~

解决方案

 通过style设置min-width:30px为你div的宽度

解决方案二：

jquery遍历一遍取div的scrollWidth，然后设置下td的宽度。

解决方案三：

你可以试试栅格系统，根据你的大小进行变化的。类似这样

解决方案四：

给你的table标签设置一个宽度为100%,下面是我弄的大概的效果图，你看一下，是不是你想要的效果：
1.没有给table设置宽度的时候：

    <div style="width:210px;height: 500px;background-color: #b2b2b2;overflow:scroll;">
        <table style="background-color: #f6894d">
            <tr>
                <td style="background-color: aqua">dddd</td>
            </tr>
            <tr>
                <td style="background-color: aqua">dddddddd</td>
            </tr>
            <tr>
                <td style="background-color: aqua">ddddddddd</td>
            </tr>
            <tr>
                <td style="background-color: aqua">ddddddd</td>
            </tr>
        </table>
    </div>

2.给table添加了宽度100%后

    <div style="width:210px;height: 500px;background-color: #b2b2b2;overflow:scroll;">
        <table style="width: 100%;background-color: #f6894d">
            <tr>
                <td style="background-color: aqua">dddd</td>
            </tr>
            <tr>
                <td style="background-color: aqua">dddddddd</td>
            </tr>
            <tr>
                <td style="background-color: aqua">ddddddddd</td>
            </tr>
            <tr>
                <td style="background-color: aqua">ddddddd</td>
            </tr>
        </table>
    </div>

解决方案五：

支持二楼的方案，简单又解决问题