设置表格td宽度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了设置表格td宽度相关的知识,希望对你有一定的参考价值。

 

 

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宽度的主要内容,如果未能解决你的问题,请参考以下文章

IE8 table表格th、td设置宽度的坑

table td 的溢出隐藏

table表格宽带研究(附带:table表格为什么设置td宽度无效)

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

设置 <td> 宽度摆脱表格显示?

如何固定一个TD的宽度