menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

htmltable固定首行

武飞扬头像
热心市民周某
帮助1人

效果：固定首行，首行标题信息不会随滚动条滚动而消失。

主要使用css：【width】【overflow-y: auto】【display: table】【table-layout: fixed】

【width: calc(100% 17px)】：设置于tbody，在table宽度的基础上加17px用于展示滚动条

【overflow-y: auto】：设置在tbody来显示滚动条

【display: table】：设置于tr，配合【width:100%】,来达到沾满table

【table-layout: fixed】：使首行和内容行对齐，使用这个的时候以上三个必须设置才能达到想要的效果

朴实无华的效果图：

学新通

CSS：

  1.  
    <style type="text/css">
  2.  
    <!-- 清除margin和padding -->
  3.  
    * {
  4.  
    margin: 0;
  5.  
    padding: 0;
  6.  
    }
  7.  
     
  8.  
    table {
  9.  
    /* 设置表格合并边框 */
  10.  
    border-collapse: collapse;
  11.  
    /* 将表格在画面中水平具中 */
  12.  
    margin: 100px auto;
  13.  
    /* 设置表格宽度 */
  14.  
    width: 500px;
  15.  
    /* 设置表格底部边框 */
  16.  
    border-bottom: 1px solid black;
  17.  
    }
  18.  
     
  19.  
    tbody {
  20.  
    /* 设置tbody为行级块元素或块元素 */
  21.  
    display: inline-block;
  22.  
    /* 设置显示高度 */
  23.  
    height: 240px;
  24.  
    /* 17px为默认滚动条宽度 */
  25.  
    width: calc(100% 17px);
  26.  
    /* 隐藏水平溢出内容 */
  27.  
    overflow-x: hidden;
  28.  
    /* 当垂直内容超出显示高度时以滚动条形式展示 */
  29.  
    overflow-y: auto;
  30.  
    }
  31.  
     
  32.  
    tr {
  33.  
    /* 将tr设置为table元素,以此达到内容沾满table的效果 */
  34.  
    display: table;
  35.  
    /* 将tr宽度设置为100%,以此达到内容沾满table的效果 */
  36.  
    width: 100%;
  37.  
    /* 设置table-layout为fixed以达到首行和内容行对其的效果 */
  38.  
    table-layout: fixed;
  39.  
    }
  40.  
     
  41.  
    td {
  42.  
    border: 1px solid black;
  43.  
    height: 80px;
  44.  
    /* 文字水平垂直居中 */
  45.  
    text-align: center;
  46.  
    line-height: 80px;
  47.  
    }
  48.  
     
  49.  
    </style>
学新通

HTML：

  1.  
    <body>
  2.  
    <table>
  3.  
    <thead>
  4.  
    <tr>
  5.  
    <td>No</td>
  6.  
    <td>姓名</td>
  7.  
    <td>年龄</td>
  8.  
    <td>性别</td>
  9.  
    <td>电话</td>
  10.  
    </tr>
  11.  
    </thead>
  12.  
    <tbody>
  13.  
    <tr>
  14.  
    <td>1</td>
  15.  
    <td>赵</td>
  16.  
    <td>20</td>
  17.  
    <td>男</td>
  18.  
    <td>123456</td>
  19.  
    </tr>
  20.  
    <tr>
  21.  
    <td>2</td>
  22.  
    <td>钱</td>
  23.  
    <td>20</td>
  24.  
    <td>男</td>
  25.  
    <td>123456</td>
  26.  
    </tr>
  27.  
    <tr>
  28.  
    <td>3</td>
  29.  
    <td>孙</td>
  30.  
    <td>20</td>
  31.  
    <td>男</td>
  32.  
    <td>123456</td>
  33.  
    </tr>
  34.  
    <tr>
  35.  
    <td>4</td>
  36.  
    <td>李</td>
  37.  
    <td>20</td>
  38.  
    <td>男</td>
  39.  
    <td>123456</td>
  40.  
    </tr>
  41.  
    <tr>
  42.  
    <td>5</td>
  43.  
    <td>周</td>
  44.  
    <td>20</td>
  45.  
    <td>男</td>
  46.  
    <td>123456</td>
  47.  
    </tr>
  48.  
    <tr>
  49.  
    <td>6</td>
  50.  
    <td>张三</td>
  51.  
    <td>20</td>
  52.  
    <td>男</td>
  53.  
    <td>123456</td>
  54.  
    </tr>
  55.  
    <tr>
  56.  
    <td>7</td>
  57.  
    <td>李四</td>
  58.  
    <td>21</td>
  59.  
    <td>男</td>
  60.  
    <td>654321</td>
  61.  
    </tr>
  62.  
    </tbody>
  63.  
    </table>
  64.  
    </body>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgeiega
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群