CSS中设置表格TD宽度的问题

转载 2011年12月27日 11:46:46
 

CSS布局,表格宽度不听使唤的实例。想把表格第一例宽度设为20,其他自适应。但CSS中宽度是等宽的。只设这一行也不起作用。但是在实际应用中总是等宽处理,并不按照样式来走。

XML/HTML代码
  1. <table width="100%">  
  2.                          <tr>  
  3.                            <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>  
  4.                          </tr>  
  5.                          <tr>  
  6.                            <td width="20"> 1</td>  
  7.                            <td ></td>  
  8.                            <td ></td>  
  9.                            <td ></td>  
  10.                            <td ></td>
  11.                           <td ></td>  
  12.                          </tr>  
  13.                          <tr>    
  14.                            <td width="20"> 2</td>  
  15.                            <td ></td>  
  16.                            <td ></td>  
  17.                            <td ></td>  
  18.                            <td ></td>
  19.                           <td ></td>  
  20.                          </tr>
  21.                        </table>  

修改过程一:如图把行整个设一次,不起作用。

XML/HTML代码
  1.                          <tr>  
  2.   
  3.                            <td width="20"> 1</td>  
  4.                            <td width="138" ></td>  
  5.                            <td width="138" ></td>  
  6.                            <td width="138" ></td>  
  7.                            <td width="138" ></td>
  8.                           <td width="138" ></td>  
  9.   
  10.                          </tr> 

修改二:把这行写法全部换成PX,不起作作。

XML/HTML代码
  1.                          <tr>  
  2.   
  3.                            <td style="width:20px; " > 1</td>  
  4.                            <td style="width:138px; "  ></td>  
  5.                            <td style="width:138px; "  ></td>  
  6.                            <td style="width:138px; "  ></td>  
  7.                            <td style="width:138px; " ></td>
  8.                           <td style="width:138px; " ></td>  
  9.                          </tr> 

修改三:这行改成CSS控制,也不起作用。

XML/HTML代码
  1. <tr>  
  2.   
  3.                            <td class="widtd_20"> </td>  
  4.                            <td class="width_138"> </td> 
  5.                            <td class="width_138"> </td> 
  6.                            <td class="width_138"> </td> 
  7.                            <td class="width_138"> </td> 
  8.                           <td class="width_138"> </td> 
  9.                          </tr>  
CSS代码
  1. td.widtd_20 {  
  2.     width:20px;   
  3. }  
  4. td.width_138 {  
  5.     width:138px;   
  6. }  

修改四:按修改三,把表格的每一行都用了CSS。还是不起作用。

修改五:在修改四的基础上,把每行的最后一个CSS控制去掉。还是不起作用。因为看了蓝色理想的文章,表格定义了100%,最后一个TD要让它自适应宽度。见下文,但这样改法还是不行。

XML/HTML代码
  1. <tr>  
  2.   <td class="widtd_20"> </td> 
  3.   <td class="width_138"> </td>
  4.   <td class="width_138"> </td>
  5.   <td class="width_138"> </td>
  6.   <td class="width_138"> </td>
  7.   
  8.   <td > </td>
  9. </tr>  

修改六:将上面的表格分成两个,其中定义宽度的行位于最上面,即解决问题。

XML/HTML代码
  1. <table width="100%">  
  2.                          <tr>  
  3.                            <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>  
  4.                          </tr>  
  5. </table>
  6. <table width="100%">
  7.                          <tr>  
  8.                            <td width="20"> 1</td>  
  9.                            <td ></td>  
  10.                            <td ></td>  
  11.                            <td ></td>  
  12.                            <td ></td>
  13.                           <td ></td>  
  14.                          </tr>  
  15.                          <tr>    
  16.                            <td width="20"> 2</td>  
  17.                            <td ></td>  
  18.                            <td ></td>  
  19.                            <td ></td>  
  20.                            <td ></td>
  21.                           <td ></td>  
  22.                          </tr>
  23.                        </table> 

思路最后解决是因为看到蓝色理想的一个贴子关于Table中TD宽度设置的问题:(网页来源:http://bbs.blueidea.com/thread-2909153-1-2.html)

我给table定义了一个类,其中有width:100% 然后我给table中的一个td定义宽度width:30px
结果是td的宽度不受控制,但是如果将td宽度改为width:10%这样效果就出来了,但是对于不同屏幕宽度,显示还是会有问题,不知道是不是百分比和绝对宽度不能兼容。有人说用table-layout:fixed,试过了,不行。请大家出点策略

table-layout:fixed 之后,在第一行就要把各td的宽度(绝对宽度和百分比都可以)定好。如果table宽度定为100%了,那么要留一个td不设置宽度,让它自由伸缩。

 

 

来自百度介绍:怎样用CSS设置table第一列样式

网页来源:http://zhidao.baidu.com/question/83848919.html?fr=qrl&fr2=query

你编写表格的时候可以这样:
把第一列变成th ,这样就可以方便的控制了。
例如:三行三列的表格可以这样写:

XML/HTML代码
  1. <table>  
  2. <tbody>  
  3. <tr>  
  4. <th></th> <td></td><td></td>  
  5. </tr>  
  6. <tr>  
  7. <th></th> <td></td><td></td>  
  8. </tr>  
  9. <tr>  
  10. <th></th> <td></td><td></td>  
  11. </tr>  
  12. </tbody>  
  13. </table>   
CSS代码
  1. th{  
  2. width:100px;  
  3. }  
  4. td{  
  5. width:200px;  
  6. }  

css设置一列td宽度

解决办法:

1.插入表格。30行两列,宽380px
2.鼠标点在第一个单元格中(一行一列),在属性面板中输入宽度100
3.完成

解决办法二:

CSS代码
  1. td.p10 {width:10%;}  
  2. td.p15 {width:15%;}  
  3. td.p20 {width:20%;}  
  4. td.p45 {width:45%;}   
XML/HTML代码
  1. <td class="p10">...</td>  
  2. <td class="p10">...</td>  
  3. <td class="p20">...</td>  
  4. <td class="p15">...</td>  
  5. <td class="p45">...</td>   

上述的百分比,也可以换成px 。此处来源:http://zhidao.baidu.com/question/62832227.html

上面两个例子中发现如果设置CSS,宽度还是不起作用,一定要看第一行是否设置了宽度。如果是自适应的话,且表格设置100%的话,最好拆成两个表格处理。至于为什么?长江VS长征也不清楚。

相关文章推荐

设置table中的td宽度不同

类似站内短信的形式的一个table,想要的实现结果如下格式:刚开始觉得“这里是名字”的td设置宽度为20%就可以了,代码如下: 这里是名字 ...

表格单元格td设置宽度无效的解决办法

http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接...
  • Quincylk
  • Quincylk
  • 2014年05月15日 10:33
  • 51263

设置table的td宽度,不随文字变宽

页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。   解决办法:     table 设置 宽度,绝对宽度...

个性化设置table的td宽度

很多时候,我们在用到table时,都希望随意设置 每个单元格的宽度,而不希望单元格被内容撑开table的样式。 1.首先,设置table的宽度 width=“1000” 或者 width=“...

html 使表格随着内容自动适应宽度

所谓难而不会,会儿不难.这个问题让我纠结了很长时间,一句css解决了,仅仅靠一个属性 td { white-space: nowrap; }...

css table自动布局下<td>宽度计算

关于td的宽度在table自动布局情况下的变化,好像并不像CSS权威指南说的那样。经过一番测试计算最终发现计算方法如下: 在css权威指南中对于单元格宽度计算和设置方法如下: 测试用例: ...

表格列td自适应内容宽度

word-break:keep-all; /* for ie */ white-space:nowrap; /* for chrome */word-break原来是IE的私有属性,但在CSS3草案中...

css3实现固定表格头部而无需设置单元格td的宽度

本博客持续修改与更新中,点击这里查看最新的内容背景最近小弟在工作都是做后台系统,一堆的表格,各种各样的。然后需求上要有固定的表头的表格,如下图所示在网上查询固定表头的实现方式为: thead 设置为...

css截取td里面的内容 如何固定td th的宽度

css截取td里面的内容 如何固定td th的宽度

解决设置table中td宽度不生效

特性:table是一个整体,每一列td的宽度是由一个其中一个最长td的宽度决定的。 解决:一定要在table标签上加word-wrap: break-word; word-break: brea...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中设置表格TD宽度的问题
举报原因:
原因补充:

(最多只允许输入30个字)