关闭

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

标签: csstablequery百度
72679人阅读 评论(2) 收藏 举报
分类:
 

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.   
  3.                            <td width="20"> 1</td>  
  4.                            <td width="138" ></td>  
  5.                            <td width="138" ></td>  
  6.                            <td width="138" ></td>  
  7.                            <td width="138" ></td>
  8.                           <td width="138" ></td>  
  9.   
  10.                          </tr> 

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

XML/HTML代码
  1.                          <tr>  
  2.   
  3.                            <td style="width:20px; " > 1</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.                           <td style="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.                            <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长征也不清楚。

3
0

猜你在找
【视频】C语言及程序设计(讲师:贺利坚)
【视频】Python爬虫工程师培养课程全套(讲师:韦玮)
【视频】Python全栈开发入门与实战(讲师:李杰)
【视频】2017软考网络规划设计师套餐(讲师:任铄)
【视频】2017软考软件设计师套餐(讲师:任铄)
【视频】2017软考信息系统项目管理师套餐(讲师:任铄)
【视频】软考(高级)项目经理实战营(讲师:张传波)
【视频】微信公众平台开发套餐(讲师:刘运强)
深度学习原理+实战+算法+主流框架套餐(讲师:唐宇迪)
2017系统集成项目管理工程师通关套餐(讲师:徐朋)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:702702次
    • 积分:6055
    • 等级:
    • 排名:第3997名
    • 原创:67篇
    • 转载:74篇
    • 译文:4篇
    • 评论:42条
    文章分类
    最新评论
    PB
    powerbuilder