2 u012789878 u012789878 于 2016.03.28 16:05 提问

css 中table的列宽怎样动态设置? 5C
css

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

5个回答

danielinbiti
danielinbiti   Ds   Rxr 2016.03.28 16:09
 通过style设置min-width:30px为你div的宽度
fly_zxy
fly_zxy 这个是正解
一年多之前 回复
showbo
showbo   Ds   Rxr 2016.03.28 16:29

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

qq_29375625
qq_29375625   2016.03.28 16:14

你可以试试栅格系统,根据你的大小进行变化的。类似这样图片说明

u011113654
u011113654   2016.03.28 16:41

给你的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>

图片说明

fly_zxy
fly_zxy   2016.03.28 23:02

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!