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

 

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

XML/HTML代码

1. <table width="100%">  
2.                          <tr>  
3.                            <tdcolspan="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.                            <tdwidth="138"></td>
   
8.                           <tdwidth="138"></td>  
   
9.   
10.                          </tr> 
    

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

XML/HTML代码

1.                          <tr>  
2.   
3.                            <tdstyle="width:20px; "> 1</td>  
4.                            <tdstyle="width:138px; " ></td>  
5.                            <tdstyle="width:138px; " ></td>  
   
6.                            <tdstyle="width:138px; " ></td>  
   
7.                            <tdstyle="width:138px; "></td>
   
8.                           <tdstyle="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.                            <tdcolspan="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长征也不清楚。