CSS中设置表格TD宽度的问题
2011-12-27 11:46
417 查看
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="width:20px; "
> 1</td>
<td
style="width:138px; "
></td>
<td
style="width:138px; "
></td>
<td
style="width:138px; "
></td>
<td
style="width:138px; "
></td>
<td
style="width: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 {
width:20px;
}
td.width_138 {
width: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定义了一个类,其中有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代码
<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{
width:100px;
}
td{
width:200px;
}
css设置一列td宽度
解决办法:
1.插入表格。30行两列,宽380px
2.鼠标点在第一个单元格中(一行一列),在属性面板中输入宽度100
3.完成
解决办法二:
CSS代码
td.p10 {width:10%;}
td.p15 {width:15%;}
td.p20 {width:20%;}
td.p45 {width: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长征也不清楚。
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="width:20px; "
> 1</td>
<td
style="width:138px; "
></td>
<td
style="width:138px; "
></td>
<td
style="width:138px; "
></td>
<td
style="width:138px; "
></td>
<td
style="width: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 {
width:20px;
}
td.width_138 {
width: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定义了一个类,其中有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代码
<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{
width:100px;
}
td{
width:200px;
}
css设置一列td宽度
解决办法:
1.插入表格。30行两列,宽380px
2.鼠标点在第一个单元格中(一行一列),在属性面板中输入宽度100
3.完成
解决办法二:
CSS代码
td.p10 {width:10%;}
td.p15 {width:15%;}
td.p20 {width:20%;}
td.p45 {width: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长征也不清楚。
相关文章推荐
- 使用表格时td不能设置宽度的问题以及文字不能换行问题
- 设置表格的td宽度失效问题
- html页面中关于一个table表格中设置上下2个td宽度一致的问题
- CSS设置表格TD宽度布局
- td 内容自动换行 table表格td设置宽度后文字太多自动换行
- td 内容自动换行 table表格td设置宽度后文字太多自动换行
- 今天抓取table里面,td设置了宽度还是不会换行,用css解决
- 表格中td 宽度设置无效
- td 内容自动换行 table表格td设置宽度后文字太多自动换行
- table表格 td设置固定宽度
- td 内容自动换行 table表格td设置宽度后文字太多自动换行
- 表格td使用百分比宽度 超出显示省略号,鼠标悬浮显示完整信息。样式设置,难点分析
- table表格宽带研究(附带:table表格为什么设置td宽度无效)
- 表格的td设置宽度无效
- css应用表格排版td中的文本过长,设置不换行,随内容同行显示样式
- table表格中文本溢出text-overflow:ellipsis使用中td表格宽度失效问题
- CSS设置表格TD TH边框问题
- table表格 td设置固定宽度
- bootstrap中给表格设置display之后表格宽度变小问题解决
- (待解决问题)nowrap在table和td都设置了宽度的时候仍然有效