table的td宽度控制

进入个人博客 Eighteen Blog

前言：td在我们有具体宽度控制的时候显的格外难以驯服，但是知道了它的原理，解决起来就不会再怕了。。

首先table的宽度我们可以设置，具体的px或者百分比，浏览器会自动按比例给td分配宽度。

<table style="width: 600px;border-collapse: collapse;" ><tr><td style="width: 200px;">我是200px</td><td style="width: 200px;">我也是200px</td></tr>
</table>

例如我们这样直接给td赋值实际的效果是两个都是300px，均分。
它也并不是跟我们所设置的宽度没有任何的关系，而是按照我们所设宽度的比例进行均分。
例如我们定义的table有600px的宽度，td1赋值200px，td2赋值400px，那么实际宽度就是我们所赋值的宽度。
如果两者加起来不到600px，那么浏览器会自动按比例进行分配宽度。（经测试，这个比例是固定的）
但是当两者宽度设置相同的情况下，一直都是均分table的宽度

第二种情况：

  <table style="width: 600px;border-collapse: collapse;" ><tr><td style="width: 300px;">我是200px</td><td style="width: 300px;">我也是200px</td><td >我是根据内容的</td></tr></table>

这种情况下浏览器会先给第三个td根据内容分配宽度，再根据比例给前两个td分配宽度。
如果前两个宽度加起来不足600px，那么第三个则是起到补齐600px的作用。

第三种情况：

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" ><tr><td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td><td >我是自由宽度</td></tr>
</table>

当我们的内容，超过了我们设置的宽度时，我们会发现自己设置的宽度又再次失效了，这时侯我们可以再table上加上table-layout: fixed;属性，代表td的宽度固定，不随内容变化。

table的td宽度控制相关推荐

html表格td宽度设置,table以及td宽度设置细节
table中table-layout设置 auto 默认值在此设置下如果没有指定table的宽度,则table会根据每列td的宽度自动被撑开,如果没有显示指定td的宽度,则td宽度根据内容而定只到t ...
前端福利之个性化设置table的td宽度（总结）
很多时候,我们在用到table时,都希望随意设置每个单元格的宽度,而不希望单元格被内容撑开table的样式. 1.首先,设置table的宽度 width="1000" 或者 wi ...
CSS中设置表格TD宽度的问题
CSS布局,表格宽度不听使唤的实例.想把表格第一例宽度设为20,其他自适应.但CSS中宽度是等宽的.只设这一行也不起作用.但是在实际应用中总是等宽处理,并不按照样式来走. XML/HTML代码 < ...
table单元格宽度一致_css控制table表格宽度的小技巧教程
因为我们平常说网页布局用DIV CSS代替table布局,但是并不是要完全放弃table,在有些数据呈现的时候用table还是比较方便的,现在我们来讲讲用css控制table宽度的方法. 对table ...
td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...
table的td、th的一些样式问题（宽度，边框，滚动条）
1. 给table加边框 table{border-collapse: collapse; /*表格的边框合并为一个单一的边框*/ } table, table tr th, table tr td ...
前端笔记，table标签中td宽度不受控制的坑
问题发现在table标签中,td的宽度设置好后,是没有用的,因为table是一个整体,他的td宽度是由其中一个最长td宽度决定的, 原因是浏览器默认情况下,如果有一个单词很长,导致一行剩下的空间放不 ...
ie8下table th和td宽度width设置不生效解决办法
ie8下table th和td宽度有时候设置无效,不按设定的宽度显示,怎么办? 这种情况一般分为两种: 第一种,某td的内容很多,需要换行,将td撑开了.这种情况还比较好处理,只要给td设置css属性 ...
html表格不随字数变化,设置table中的宽度不随文字改变让其固定
设置table中的宽度不随文字改变让其固定来源:互联网作者:佚名时间:02-17 16:02:28[大中小] 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有 ...

table的td宽度控制

table的td宽度控制相关推荐

最新文章

热门文章