【JavaWeb】html中有关table、tr和td的宽度和高度设置

桃扇骨 2022-06-02 01:21 1769阅读 0赞

**做网页的时候可能会遇到表格宽度对不齐的问题。**

**首先，来分析一下这三个标签中****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之间的关系。首先肯定是根据内容的需要，在这个基础上，再根据设置的值来确定，哪个设置的值大就按照哪个，如果一个设置了值一个没有设置值，那么按照设置值的算。

本文转自：http://www.cnblogs.com/limeiky/p/5749355.html。

发表评论取消回复

表情：

评论列表（有 0 条评论，1769人围观）

还没有评论，来说两句吧...

相关阅读

相关 android 设置高度等于宽度,如何设置relativelayout高度等于它的宽度？

我搜索了很多，以找出它的工作原理，我什么都没有。我发现一些Java代码动态地做到这一点，但没有工作主题的蚂蚁，当打开程序，显示一个力量关闭。这是我的代码：如何设置relat

一时失言乱红尘/ 2022年10月16日 07:28/ 0 赞/ 193 阅读

相关 Android中获取屏幕的高度和宽度

`android获取屏幕的高度和宽度用到WindowManager这个类，两种方法：` `1``、WindowManager wm = (WindowManager) get

Myth丶恋晨/ 2022年09月29日 14:54/ 0 赞/ 215 阅读

相关如何给超链接设置宽度和高度

1、利用display：block属性 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta

短命女/ 2022年08月12日 09:59/ 0 赞/ 168 阅读

相关获取浏览器高度和宽度

javascript方法 IE中： document.body.clientWidth ==> BODY对象宽度 document.body.

客官°小女子只卖身不卖艺/ 2022年06月18日 10:25/ 0 赞/ 248 阅读

相关 getCompoundDrawables()和获取图片宽度和高度

[getCompoundDrawables()][getCompoundDrawables]返回一个包含四个数据的数组在布局文件中设置四周图片，用getCompoundDr

骑猪看日落/ 2022年06月15日 09:25/ 0 赞/ 214 阅读

相关设置背景图片的宽度和高度

使用background-size属性设置语法： background-size: length|percentage|cover|contain;

Love The Way You Lie/ 2022年06月13日 06:54/ 0 赞/ 309 阅读

相关【JavaWeb】html中有关table、tr和td的宽度和高度设置

做网页的时候可能会遇到表格宽度对不齐的问题。首先，来分析一下这三个标签中height和width的区别： 1、table中的width和height设置及其作用： t

桃扇骨/ 2022年06月02日 01:21/ 0 赞/ 1770 阅读

相关了解高度和宽度

出处：[如何解决PC端和移动端自适应问题？][PC] 下面用图片来说明： ![905548-20160511094701187-1178460585.png][] 网页

本是古典何须时尚/ 2022年05月10日 09:30/ 0 赞/ 162 阅读

相关如何设置table中和<td>的高度

//-----------------自定义表格table的行和列的宽和高\----------------------// 先设置一个样式如下： <style

川长思鸟来/ 2021年11月17日 07:46/ 0 赞/ 753 阅读

相关各种宽度和高度

var s = “”; s += “\\r\\n网页可见区域宽：”+ document.body.clientWidth; s += “\\r\\n网页可见区域高：”+

绝地灬酷狼/ 2021年10月29日 09:32/ 0 赞/ 328 阅读