zoukankan      html  css  js  c++  java
  • css中关于table的相关设置

    一、设置好看的单边框表格

      1、一种实现方式

        分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框。其他设置方式同样可以实现。

    table{            
                border-right: 1px solid;
                border-top: 1px solid;
    
                /*相邻边框被合并*/
                border-collapse:collapse;
    }
    td{
            border-left: 1px solid;
            border-bottom: 1px solid;
    }

    二、给表格设置居中,及文本居中

      1、表格整体居中    

    table{ 
                 margin:auto; 
     }

      2、table文本居中

       

    td{    
                    
        text-align:center;
                
    }

    、table的width和height设置

      

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

     四、table文本格式设置

      

    td{    
        font-weight: bold;
        font-size: 20px;
        font-family:"华文楷体";
                }

     

        

    就算这个世道烂成一堆粪坑,那也不是你吃屎的理由
  • 相关阅读:
    POJ 3126 Prime Path
    POJ 2429 GCD & LCM Inverse
    POJ 2395 Out of Hay
    【Codeforces 105D】 Bag of mice
    【POJ 3071】 Football
    【POJ 2096】 Collecting Bugs
    【CQOI 2009】 余数之和
    【Codeforces 258E】 Devu and Flowers
    【SDOI 2010】 古代猪文
    【BZOJ 2982】 combination
  • 原文地址:https://www.cnblogs.com/whalesea/p/10362646.html
Copyright © 2011-2022 走看看