css table td 宽度不生效

wxyvgo 2017-09-17 04:20:00

自己定义了td的列宽，是固定宽度的；但是如果数据列的内容太长，系统会自动分配列宽，和预想的不一致。
我的问题是，chrome里width 48px和下面的80px不一致，这个48px是怎么来的？

...全文

613 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2017-09-17

打赏
举报

回复

如果数据列的内容太长，系统会自动分配列宽，和预想的不一致。你可以设置table的css实现 table-layout:fixed

Table要比其它html标记占更多的字节。 (延迟下载时间，占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面的生成速度，让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。 (增加设计的复杂度，增加页面加载时间，增加HTTP会话数。) 在某些浏览器中Table里的文字的拷贝会出现问题。 (这会让用户不悦。) Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%) (这会限制你页面设计的自由性。) 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识，会省去你以后大量的时间。) table对对于页面布局来说，从语义上看是不正确的。 (它描述的是表现，而不是内容。) table代码会让阅读者抓狂。 (不但无法利用CSS，而且会你不知所云) table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。 (你看过CSS Zen Garden吗?) Tables的[......] 阅读全文>>

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、、

写原生的table样式时发现，给 td的宽度赋值怎么也不生效，用了important也不生效。问题解决给table的样式加上一下属性，设置的宽度就生效了（可以设置固定宽度，也可以是百分比） table-layout:fixed; 解决了问题又去看tableLayout这个属性，因为默认的值是automatic，列宽由单元格内容的宽度决定的，所以设置的列宽无法生效。改成fixed 列宽就由设置的列宽控制了。 ...

问题描述：当我们使用css对table中的td设置宽度的时候，td的宽度还是对于table的宽度自适应，没有达到设置宽度的效果。 <style type="text/css"> table { border: 1px solid #ddd; font: 13px/25px "微软雅黑"; table-layout: fixed; backgroun...

【CSS td/th添加宽度失效】

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章