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长征也不清楚。

举报

相关文章推荐

表格列td自适应内容宽度

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

屏蔽网站广告插件:广告终结者

1. 上网站: http://www.adtchrome.com/ Chorme下载地址: http://www.adtchrome.com/%E5%B9%BF%E5%91%8A%E7%BB%88%E...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

利用tabel实现 部分列宽度按固定,一列根据容器宽度自适应

最简单的方法实现部分列固定宽度,一列随着容器宽度自适应 table-layout: fixed ,并且这是部分固定宽度列的宽度,并且td overflow:hidden,防止溢出 并...

设置table中的td宽度不同

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

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

http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接...

[HTML]表格Table宽度设置无效的解决方法

表格Table宽度设置无效的解决方法 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效。请看如下代码: <ht...

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

CSS布局,表格宽度不听使唤的实例。想把表格第一例宽度设为20,其他自适应。但CSS中宽度是等宽的。只设这一行也不起作用。但是在实际应用中总是等宽处理,并不按照样式来走。 XML/HTML代码 ...
  • sunfor
  • sunfor
  • 2011-12-27 11:46
  • 75795

表格中td 宽度设置无效

转自出处:http://blog.csdn.net/quincylk/article/details/25875301/    仅自己整理,做学习用途 在做table页面时,有时对td设置...

IE中表格colspan属性影响表格宽度问题

在用IE浏览器制作预览网页的时候,如果表格使用了colspan属性(变现为列数不同,有合并的列),表格的自动宽度会受到很大的影响,以至于错位混乱。

css 固定HTML表格的宽度

http://www.cnblogs.com/sese/p/6118030.html ******************************** 在网页中插件表格时,就算你有时定义了...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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