没有合适的资源?快使用搜索试试~ 我知道了~
首页html 表格单元格的宽度和高度的设置方法
做网页的时候,经常会碰到表格宽度对不齐的问题。详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下: 1、table中的width和height设置及其作用:table中设置的height其实是设置个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。table中设置的width值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。(这个内部内容如果是图片的话是可以改变表格宽度的。) 2、tr标签中width和height设置及其作用:
资源详情
资源评论
资源推荐
html 表格单元格的宽度和高度的设置方法表格单元格的宽度和高度的设置方法
做网页的时候,经常会碰到表格宽度对不齐的问题。详细地看了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,使用传统的方法
<table width="400">
<tr>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<table>
2,使用css
<style>
.td{width:100px;}
</style>
<table width="400">
<tr>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
</tr>
<table>
以上两种方法可能出现的问题就是,如果内容超过设定,如图片宽度大于100,会自然撑开,自动调节表格宽度
3,用css
<style>
.td{width:100px;overflow:hidden}
</style>
<table width="400">
<tr>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
</tr>
<table>
weixin_38660359 -
粉丝: 3
- 资源: 961
上传资源 快速赚钱
- 我的内容管理
收起
- 我的资源
快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分
登录查看自己的积分
- 我的C币
登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
-
zigbee-cluster-library-specification
-
JSBSim Reference Manual
-
c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
-
建筑供配电系统相关课件.pptx
-
企业管理规章制度及管理模式.doc
-
vb打开摄像头.doc
-
云计算-可信计算中认证协议改进方案.pdf
-
[详细完整版]单片机编程4.ppt
-
c语言常用算法.pdf
-
c++经典程序代码大全.pdf
-
单片机数字时钟资料.doc
-
11项目管理前沿1.0.pptx
-
基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
-
智慧交通综合解决方案.pptx
-
建筑防潮设计-PowerPointPresentati.pptx
-
SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证 文档复制为VIP权益,开通VIP直接复制 信息提交成功
weixin_38660359
- 粉丝: 3
- 资源: 961
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论10