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>

图片说明

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