zoukankan      html  css  js  c++  java
  • 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度

    关于htmltable表格tr,td的高度和宽度

    做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题。首先,来分析一下这三个标签中heightwidth的区别:

     1table中的widthheight设置及其作用:

    table中设置的height其实是设置一个最小值,也就是当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height,当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。

    table中设置的width一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。(这个内部内容如果是图片的话是可以改变表格宽度的。)

     2tr标签中widthheight设置及其作用:

    tr标签里面的width设置不起任何作用,因为从第一点可以看出,表格的width是不能改变的,tr标签当然就不起作用了。

    所以在tr中只有讨论height设置的可能了,tr中的height设置和几个tr之间的设置有关。

    当几个tr都设置了height的具体数值时,各个trheight按照设置的值的比例来分配总的height,注意这里说的是总的height值。

    当几个tr都没有设置height具体值时,平均分配总的height

    当有的tr设置了具体的数值,有的没有设置具体的数值为默认时,先保证各个tr的基本需要,剩下的再满足设置了具体值的tr,之后再全部给没有设置具体值的tr

    最后一种情况还要考虑总的宽度不够tr总的设置值的情况,不够的话要满足tr的基本需要,这里会自动延长表格的height。然后再考虑设置了heighttr,最后考虑没有设置heighttr

    3td标签中widthheight设置及其作用:

    td标签里面的widthheight都是起作用的。先看tdwidth吧,某一个tdwidth是和所处的一列每个tdwidth都相关的,其中最大的width作为这一列中每个tdwidth,一定要从全局把握某个tdwidth,不能从这一个的width设置就断言它的宽度就是多少,这样是不准确的。

    当我们把每一列的宽度都弄清楚之后,事情就好办了。这时候各个td之间的宽度分配按照第二条中各trheight分配规律,

    有一点不同的是全部是默认的情况下,tdwidth不是平均分配,而是根据各自的实际内容按比例分配

    再看看tdheight设置吧,各个tdheight要看这个td所在的行的最大高度来确定这一行的每个tdheight,然后各个行的高度情况和tr中的height分配原则是一样的。

    还有一点要注意,就是tdheighttrheight之间的关系。首先肯定是根据内容的需要,在这个基础上,再根据设置的值来确定,哪个设置的值大就按照哪个,如果一个设置了值一个没有设置值,那么按照设置值的算。

  • 相关阅读:
    常见寻找OEP脱壳的方法
    Windows内核原理系列01
    HDU 1025 Constructing Roads In JGShining's Kingdom
    HDU 1024 Max Sum Plus Plus
    HDU 1003 Max Sum
    HDU 1019 Least Common Multiple
    HDU 1018 Big Number
    HDU 1014 Uniform Generator
    HDU 1012 u Calculate e
    HDU 1005 Number Sequence
  • 原文地址:https://www.cnblogs.com/limeiky/p/5749355.html
Copyright © 2011-2022 走看看