关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度
做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题。首先,来分析一下这三个标签中height和width的区别:
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的。然后再考虑设置了height的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之间的关系。首先肯定是根据内容的需要,在这个基础上,再根据设置的值来确定,哪个设置的值大就按照哪个,如果一个设置了值一个没有设置值,那么按照设置值的算。
转载于:https://www.cnblogs.com/limeiky/p/5749355.html
关于html中table表格tr,td的高度和宽度相关推荐
- 谈一谈HTML中table、tr、td标签的width和height
一般我们利用HTML中table做表格式,经常会遇到table.tr.td标签的width和height问题,而有时候发现在对tr.td设置宽度或高度时没有效果,其实这就是表格标签的特殊性,他们几个互 ...
- HTML中table表格拆分合拼(colspan、rowspan)
本文关键介绍了HTML中table表格拆分合拼(colspan.rowspan),原文中根据实例编码介绍的十分详尽,对大伙儿的学习或是工作中具备一定的参照学习使用价值,必须的小伙伴们下边伴随着小编来一 ...
- vue中table表格导出为图片格式
vue中table表格点击下载为图片格式 实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
- php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
- html颜色代码表odd,CSS的odd和even属性实现table表格tr单双行颜色相间而不同
CSS的odd和even属性实现table表格tr单双行颜色相间而不同 0 325 暴猿 2019/6/13 9:04:47 效果如下图所示: img[/layedit/img/2019061 ...
- layui table 添加img_layui中table表格的基本操作
最近抽空总结了下layui中table表格的相关配置,解释的比较全面,可供大家参考,页面效果如下: table表格.png table表格html部分: 新增 备注 编辑 table表格渲染js (包 ...
- 根据div 标签 查看数组@class=modulwrap 下面的/table/tbody/tr/td
<div class="modulwrap"><div class="request_title"><span class=&qu ...
- elementUI 中 table表格 图片 放大
elementUI 中 table表格 图片 放大 当项目中表格的表格插入图片,需要放大查看图片, 可使用elementUI的组件 el-popover 弹出框,具体操作: <el-table- ...
- table表格tr、td、合并、间距、边框合并、设置边距 代码
table边框与td合并代码: 写在style里面生效 border-collapse: collapse; 设置边框 写在table里面,就表示每一个都带边框 border="1px so ...
- vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列 情景一:vue+element 只要在el-ta ...
最新文章
- 天籁数学——数列篇(1)
- ip pim spare 源树 和 共享树_iPhone通过内置应用与电脑传输共享文件指南
- cjmx:JConsole的命令行版本
- python中 的用法_详解python中@的用法
- Visual Studio 20xx试用版升级为正式版(WIN7同样有效)图解、附带序列号
- c++99乘法表_nine-nine table 不是“99张桌子”,理解错了数学老师会打你!
- 有关linux用户和用户组管理的知识详解
- OCR常见问题(4)
- (58)FPGA乘法器实现(task)
- 软件测试第五周 - 编码的 UI 测试
- HTML5、canvas颜色拾取器
- ctf镜子里面的世界_在秋天遇见“冰雪世界”,好像老天给我变了个魔法
- Python+Pid实现车辆速度跟踪
- android电视 怎么调电视机的信号源,电视怎么调信号源
- NOI Linux 2.0 桌面背景展示
- 词根词缀学单词【1】
- 账号被计算机远程终止,宽带远程连接被终止怎么办
- 相关矩阵 Correlation matrix
- 33个高能CSS选择器让我受益匪浅
- python中类的首字母一定得大写吗_Python学习
热门文章
- File Cabinet Pro for Mac(菜单栏快捷文件管理软件)
- M1 Mac上运行Windows 11
- Mac系统设置系统搜索范围的方法
- 【#9733;】SPF(Dijkstra)算法完美教程
- DigitalRealty公司在达拉斯新建一个数据中心
- linux-unit1
- JavaBean、bean 、POJO、PO、DTO、VO、BO 、EJB、EntityBean
- tcp 三次握手连接
- iOS CocoaPods:Updating local specs repositories一直停在那里了
- 简单几步把Spring Boot 项目部署到 K8S,步骤来了!