设置表格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. <td width="20"> 1</td>
3. <td width="138" ></td>
4. <td width="138" ></td>
5. <td width="138" ></td>
6. <td width="138" ></td>
7. <td width="138" ></td>
8. </tr>

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

XML/HTML代码

1. <tr>
2. <td style="width:20px; " > 1</td>
3. <td style="width:138px; "  ></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. </tr>

修改三：这行改成CSS控制，也不起作用。

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. <td class="width_138"> </td>
8. </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. <td > </td>
8. </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长征也不清楚