一切福田，不離方寸，從心而覓，感無不通。

table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table

两种类型的表格布局

你有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。

HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。

在W3C关于<table>相关标签的文档中我们可以找到，HTML 4中<table>相关标签的默认样式表：

js 代码:

table    { display: table }

tr       { display: table-row }

thead    { display: table-header-group }

tbody    { display: table-row-group }

tfoot    { display: table-footer-group }

col      { display: table-column }

colgroup { display: table-column-group }

td, th   { display: table-cell }

caption  { display: table-caption }

显而易见HTML Table使用标签<table>、<tr>、<td>等标签，就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况：

  • table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
  • inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
  • table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
  • table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
  • table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
  • table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
  • table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
  • table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
  • table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
  • table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
  • 下面是一些 display:table 示例，你可能会发现它很有用：

    · 动态垂直居中对齐

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    Html:
    <button>添加多行</button>
     
    <div class="box">
        <p>Double Line</p>
        <p>Double Line</p>
    </div>
     
    LESS
    body {
      color: @beige;
      background: @green;
      display: table;
      width: 100%;
      height: 100%;
    }
     
    .box {
      display:table-cell;
      vertical-align: middle;
      text-align: center;
    }
     
    /*====== Ignore section below ======*/
     
    @orange: #BD4932;
    @yellow: #FFD34E;
    @green: #105B63;
    @beige: #FFFAD5;
     
     
    /* Basic Style*/
    * { margin:0; padding:0;}
    html, body { height: 100%; }
    button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block; -webkit-appearance: none;background: @orange; outline: none;  border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;}
    button:active {border-color: @beige; color:@beige;}
     
    JS
    document.querySelector("button").addEventListener("click", function(){
        var element = document.createElement("p");
        element.innerText = "额外添加的行";
      document.querySelector(".box").appendChild(element);

    这也许是使用display:table最常见的例子了。对于动态高度的元素，有了它，就可以实现真正的垂直（居中）对齐。

    还有另一个不用display:table实现的垂直居中的简单方式，您可能感兴趣：

    table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法

  •  

    找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;

     

    原理很简单，有爱研究的童鞋可以去css官网看看说明文档。

     

    直接贴代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>转载自·威易网CSS教程</title>
    <style>
    table tbody {
    display:block;
    height:195px;
    overflow-y:scroll;
    }
    table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    }
    table thead {
    width: calc( 100% - 1em )
    }
    table thead th{ background:#ccc;}
    </style>
    </head>
    <body>
    <table width="80%" border="1">
    <thead>
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>出生年月</th>
    <th>手机号码</th>
    <th>单位</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三封</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴与四十大盗</td>
    </tr>
    <tr>
    <td>张小三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>腾讯科技</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>浏阳河就业</td>
    </tr>
    <tr>
    <td>张三疯子</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张大三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三五</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张刘三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

     

from:https://www.cnblogs.com/susan-home/p/8761574.html

Copyright © 2024 Longsheng All rights reserved