css手写一个表头固定

时间 2019-11-09

标签 css 手写一个表头固定栏目 CSS 繁體版

原文原文链接

Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，恰恰刚入职的公司选择了手动渲染表格，后期又以为表格数据拉太长想要作表头固定。为了不对代码改动太大，因此决定手写表头固定
主要遇到的个问题就是固定之后数据表格与表头的对齐问题，也看了不少我文章试下来都不怎么成功,只好本身一点点试
表头固定的通常思路是布两个table，一个放表头，一个放表格体，而后将表格体加上高度height以及overflow-ycss

<div class="content">
    <div class="table_head">
    <table border>
            <colgroup>
                <col width="10%" />
                <col width="10%" />
                <col width="5%" />
                <col width="5%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col"/>
            </colgroup>
        <thead>
            <th>缩略图</th>
            <th>标题</th>
            <th>总价</th>
            <th>总销量</th>
            <th>周销量</th>
            <th>增幅</th>
            <th>商品评分</th>
            <th>分配开发</th>
            <th>SKU</th>
            <th>商品状态</th>
            <th>审核备注</th>
            <th>时间</th>
            <th>操做</th>
        </thead>
    </table>
    </div>
    <div class="table_body">
    <table border>
            <colgroup>
                <col width="10%" />
                <col width="10%" />
                <col width="5%" />
                <col width="5%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col"/>
            </colgroup>
            <tbody>
                <tr>
                    <td>此处应有图片</td>
                    <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                    <td>0.99</td>
                    <td>13113</td>
                    <td>107</td>
                    <td>-21%</td>
                    <td>5.0</td>
                    <td>张乐</td>
                    <td>abcadawdadawdawdadad</td>
                    <td>开发成功</td>
                    <td>备注</td>
                    <td>上架:2016-07-02
                        采集:2018-06-25</td>
                    <td>增长</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增长</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增长</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增长</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增长</td>
                </tr>
            </tbody>
    </table>
    </div>

两个table定义的不一致也就致使了表头与表格的不对齐，这里须要使用<colgroup>将两个表格的列宽定义一致前端

<colgroup>
      <col width="10%" />
      <col width="10%" />
      <col width="5%" />
      <col width="5%"/>
      <col width="5%"/>
      <col width="10%"/>
      <col width="10%"/>
      <col width="5%"/>
      <col width="10%"/>
      <col width="5%"/>
      <col width="10%"/>
      <col width="5%"/>
      <col"/>
  </colgroup>

在两个table标签下都定义一下相同的<colgroup>,注意列数与表格列数相同，最后一列能够不要定义固定的宽前端框架

能够看出来仍是没有对齐，这里有两个问题，一是：表体加上滚动条后会占约17px的宽度，第二个是表格的列宽table-layout默认取值automatic是随单元格内容撑起来的，因此要对这两个作调整。个人方法是给表头加一个padding_right:17px;两个table都设定为table-layout：fixed
css代码框架

.content{
            width: 80%;
        }
        table {
            width: 100%;
            border-collapse : collapse; 
            border:1px solid #ccc;
            color:#4c4c4c;
        }
        th,td{
            padding:5px;
        }
        .table_body{
            height:312px;
            overflow-y: scroll;
        }
        .table_head{
            padding-right: 17px;
        }
        .table_body table,.table_head table{
            table-layout: fixed;
        }

这样就完美对齐了，适合任意屏幕宽度布局

有几个须要注意的地方个人两个表格都使用div包裹起来，主要是因为表格display:table属性致使padding,overflow等属性很难设置上去，所以能够设置到外包裹的div上，毕竟table布局水真的深，一时还不敢碰ui