设置表格td宽度

 

 

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

XML/HTML代码

<table width="100%">
                         <tr>
                           <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>
                         </tr>
                         <tr>
                           <td width="20"> 1</td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                          <td ></td>
                         </tr>
                         <tr>
                           <td width="20"> 2</td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                          <td ></td>
                         </tr>
                       </table>

修改过程一：如图把行整个设一次，不起作用。

XML/HTML代码

                         <tr>

                           <td width="20"> 1</td>
                           <td width="138" ></td>
                           <td width="138" ></td>
                           <td width="138" ></td>
                           <td width="138" ></td>
                          <td width="138" ></td>

                         </tr>

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

XML/HTML代码

                         <tr>

                           <td style="20px; " > 1</td>
                           <td style="138px; "  ></td>
                           <td style="138px; "  ></td>
                           <td style="138px; "  ></td>
                           <td style="138px; " ></td>
                          <td style="138px; " ></td>
                         </tr>

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

XML/HTML代码

<tr>

                           <td class="widtd_20"> </td>
                           <td class="width_138"> </td>
                           <td class="width_138"> </td>
                           <td class="width_138"> </td>
                           <td class="width_138"> </td>
                          <td class="width_138"> </td>
                         </tr>

CSS代码

td.widtd_20 {
    20px;
}
td.width_138 {
    138px;
}

修改四：按修改三，把表格的每一行都用了CSS。还是不起作用。

修改五：在修改四的基础上，把每行的最后一个CSS控制去掉。还是不起作用。因为看了蓝色理想的文章，表格定义了100%，最后一个TD要让它自适应宽度。见下文，但这样改法还是不行。

XML/HTML代码

<tr>
  <td class="widtd_20"> </td>
  <td class="width_138"> </td>
  <td class="width_138"> </td>
  <td class="width_138"> </td>
  <td class="width_138"> </td>

  <td > </td>
</tr>

修改六：将上面的表格分成两个，其中定义宽度的行位于最上面，即解决问题。

XML/HTML代码

<table width="100%">
                         <tr>
                           <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>
                         </tr>
</table>
<table width="100%">
                         <tr>
                           <td width="20"> 1</td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                          <td ></td>
                         </tr>
                         <tr>
                           <td width="20"> 2</td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                           <td ></td>
                          <td ></td>
                         </tr>
                       </table>

思路最后解决是因为看到蓝色理想的一个贴子关于Table中TD宽度设置的问题：（网页来源:http://bbs.blueidea.com/thread-2909153-1-2.html）

我给table定义了一个类，其中有100% 然后我给table中的一个td定义宽度30px 
结果是td的宽度不受控制，但是如果将td宽度改为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代码

<table>
<tbody>
<tr>
<th></th> <td></td><td></td>
</tr>
<tr>
<th></th> <td></td><td></td>
</tr>
<tr>
<th></th> <td></td><td></td>
</tr>
</tbody>
</table>

CSS代码

th{
100px;
}
td{
200px;
}

css设置一列td宽度

解决办法：

1.插入表格。30行两列，宽380px 
2.鼠标点在第一个单元格中（一行一列），在属性面板中输入宽度100 
3.完成

解决办法二：

CSS代码

td.p10 {10%;}
td.p15 {15%;}
td.p20 {20%;}
td.p45 {45%;}

XML/HTML代码

<td class="p10">...</td>
<td class="p10">...</td>
<td class="p20">...</td>
<td class="p15">...</td>
<td class="p45">...</td>

上述的百分比，也可以换成px 。此处来源：http://zhidao.baidu.com/question/62832227.html

上面两个例子中发现如果设置CSS，宽度还是不起作用，一定要看第一行是否设置了宽度。如果是自适应的话，且表格设置100%的话，最好拆成两个表格处理。至于为什么？长江VS长征也不清楚