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 这个是正解
2 年多之前 回复
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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
实现可动态改变宽度的表格简单方法
  生成 css 类 ,用于设置表格  cssClassName="t"  cssClassNameMaxID=400  cssClassNameMinID=1  minWidth=50  Response.Write ""  Response.Write vbcrlf  for i=cssClassNameMinID to cssClassNameMaxID     Response.Writ
table css样式设定中的宽度设定
在对table进行样式设定的过程中,有些时候会发觉表格样式设定了,但样式却会自适应或不改变,利用table-layout:fixed;可以在有效范围内改变一些表格样式,但在实际应用中,很多样式还是不能改变。实际上,还是这个属性的原因:先了解一下fixed布局模型的工作步骤: 1.width属性值不是auto的所有列元素会根据width值设置该列的宽度. 2.如果一个列的宽度为auto---但是
设计表头固定并且列宽可调整的Table表格
表头固定 我们都知道HTML中table的thead是会随着tbody滚动的。所以要实现tbody内容滚动,而表头固定就需要用两个table来显示,一个显示只用于表头,另一个用于显示tbody内容。 表格列宽调整 添加一个图标或者div,作为拖动的标尺,当触发左键事件时(绑定mousedown事件),获取鼠标当前X坐标并设置鼠标样式。 $('.table-col-resize').eq(+
table设置列宽度
遇到一个表格不能设置宽度(table有宽度,有一两列需要设固定大小的宽度并希望看到展现出来的宽度值与设定的一样,其他的列则可以根据剩余宽度自动填充,但是显示出来的宽度比实际设置的值多了几个像素)这个问题,百度了一下查到一些资料: 首先贴资料,相信大家看了基本就了解了: tableLayout 属性用来显示表格单元格、行、列的算法规则。 固定表格布局: 固
CSS 控制table 滑动及调整列宽等问题总结
本文介绍了通过css+js来控制table的x,y方向上的滚动。然后详细分析了使用table时,可能出现的width宽度与预期设定不一致的情况,最后给出了解决方案
css 固定HTML表格的宽度
http://www.cnblogs.com/sese/p/6118030.html ******************************** 在网页中插件表格时,就算你有时定义了宽度,默认的也会根据里面内容的来自动拉伸。有时候自动拉伸是好,但是如果你表格里面的内容太长,表格就会拉伸的特别难看。 像下面的表格,正常的显示应该如下: 但是如果里面的数据太长的话,就会错位成
html table 固定列宽
#xxxTable{     table-layout: fixed; } #xxxTable td{     word-break: break-all;     word-wrap:break-word; }
HTML table合并行列后,使用百分比设置列宽
表格中有一行合并过,其它没有合并的行的列宽会平均化,所设置的style="width: 60%"并不会起作用,对列宽的设置会失效。 table-layout: fixed 的表格,各列宽度由第一行决定,后面指定的宽度会被忽略。 你第一行合并了,所以各列宽度均分了。 解决方法:在<table>之后添加代码:<col style="width: 60%" /> <col style="widt
<table>标签中 如何固定<td> 宽度
这是我div+css 布好的局我想在第一行,第一列格子内添加图片。没想到变成了这样, 下面是css代码。,随着td 内添加的图片和文字 撑开了td宽度。查找了资料,在css 中加入 table-layout:fixed; 属性后,问题解决! table-layout:fixed;  w3school的介绍为:设置表格布局算法,参数为 列宽由表格宽度和列宽度设定。...
js 实现table每列可左右拖动改变列宽度
table 用户编号 试用时间转正时间性别姓名拼音 生日时间民族身高 2000001 1997-3-131997-3-131WZJ 1965-3-13汉171 2000045 2001-2-152001-3-150WY 1978-8-5汉162 2000046 2001-2-232001-3-230LQ 2001-2-23汉171