源码论坛公告:有很多假冒锦尚中国的网站出现,还有声称是跟我们合作网站,请擦亮眼睛避免被骗,源码论坛唯一域名为52jscn.com 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

新版大型房产门户源码下载
知名广告联盟 精准不扣量
企业免备案主机仅需80元
亿恩免费建网站 服务器特价
锦尚中国源码论坛
百度站长平台 精确提升SEO
旅游网解决方案 大型旅游门户
大型装修门户助您抢占商机
【稳定】ios苹果签名 网站封装微信营销项目诚招代理
安乐业房产网全新来袭
 
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
查看: 1844|回复: 0

[CSS/Html] html表格单元格的宽度和高度的设置方法详解

[复制链接]

1016

主题

1277

帖子

737万

金币

超级版主

Rank: 8Rank: 8

积分
14747599
发表于 2018-11-1 15:05:11 | 显示全部楼层 |阅读模式
做网页的时候,经常会碰到表格宽度对不齐的问题。详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下:

       1、table中的width和height设置及其作用:table中设置的height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。table中设置的width值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。(这个内部内容如果是图片的话是可以改变表格宽度的。)

      2、tr标签中width和height设置及其作用:tr标签里面的width设置不起任何作用,因为从第一点可以看出,表格的width是不能改变的,tr标签当然就不起作用了。所以在tr中只有讨论height设置的可能了,tr中的height设置和几个tr之间的设置有关。当几个tr都设置了height的具体数值时,各个tr的height按照设置的值的比例来分配总的height值,注意这里说的是总的height值。当几个tr都没有设置height具体值时,平均分配总的height值。当有的tr设置了具体的数值,有的没有设置具体的数值为默认时,先保证各个tr的基本需要,剩下的再满足设置了具体值的tr,之后再全部给没有设置具体值的tr。最后一种情况还要考虑总的宽度不够tr总的设置值的情况,不够的话要满足tr的基本需要,这里会自动延长表格的height的。然后再考虑设置了heightr的tr,最后考虑没有设置height的tr。

      3、td标签中width和height设置及其作用:td标签里面的width和height都是起作用的。先看td的width吧,某一个td的width是和所处的一列每个td的width都相关的,取其中最大的width作为这一列中每个td的width,这点是让我们最混淆的地方,一定要从全局把握某个td的width,不能从这一个的width设置就断言它的宽度就是多少,这样是不准确的。当我们把每一列的宽度都弄清楚之后,事情就好办了。这时候各个td之间的宽度分配按照第二条中各 tr的height分配规律,有一点不同的是全部是默认的情况下,各td的width不是平均分配,而是根据各自的实际内容按比例分配。再看看td的height设置吧,这个相对简单一点了,不过各个td的height要看这个td所在的行的最大高度来确定这一行的每个td的height,然后各个行的高度情况和tr中的height分配原则是一样的。还有一点要注意,就是td的height和tr的height之间的关系。首先肯定是根据内容的需 要,在这个基础上,再根据设置的值来确定,哪个设置的值大就按照哪个,如果一个设置了值一个没有设置值,那么按照设置值的算。

1使用传统的方法

  1. <table width="400">
  2. <tr>
  3. <td width="100"></td>
  4. <td width="100"></td>
  5. <td width="100"></td>
  6. <td width="100"></td>
  7. </tr>
  8. <table>
复制代码


2使用css

  1. <style>
  2. .td{width:100px;}
  3. </style>
  4. <table width="400">
  5. <tr>
  6. <td class="td"></td>
  7. <td class="td"></td>
  8. <td class="td"></td>
  9. <td class="td"></td>
  10. </tr>
  11. <table>
复制代码


以上两种方法可能出现的问题就是,如果内容超过设定,如图片宽度大于100,会自然撑开,自动调节表格宽度

3用css的另外一种办法

  1. <style>
  2. .td{width:100px;overflow:hidden}
  3. </style>
  4. <table width="400">
  5. <tr>
  6. <td class="td"></td>
  7. <td class="td"></td>
  8. <td class="td"></td>
  9. <td class="td"></td>
  10. </tr>
  11. <table>
复制代码


用这种方法,可以把超过的部分隐藏掉,如果需要严格控制的话,可以采用这种方法,如果把overflow的属性值设置成scroll或者auto的话,可以采用这种方法,如果把overflow的属性值设置成scroll或者auto的话,可以在超过的时候使用滚动条调节....
  

全文总结

以上所述是小编给大家介绍的html 表格单元格的宽度和高度的设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对锦尚中国源码论坛网站的支持!
锦尚数据隆重推出免备案国内BGP多线主机,相信欧阳没错滴   双线至强云主机火热订购 http://yun.52jscn.com/shuanxian.html
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛 锦尚中国源码

锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 )

GMT+8, 2019-4-24 00:39 , Processed in 0.147951 second(s), 26 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 锦尚爱心