设置表格td宽度

时间：2023-03-10 03:28:25
设置表格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长征也不清楚

相关文章