css手寫一個表頭固定

Bootstrap,layui等前端框架裏面都對錶頭固定，表格滾動有實現，恰恰剛入職的公司選擇了手動渲染表格，後期又以爲表格數據拉太長想要作表頭固定。爲了不對代碼改動太大，因此決定手寫表頭固定
主要遇到的個問題就是固定之後數據表格與表頭的對齊問題，也看了不少我文章試下來都不怎麼成功,只好本身一點點試
表頭固定的通常思路是布兩個table，一個放表頭，一個放表格體，而後將表格體加上高度height以及overflow-y

<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佈局水真的深，一時還不敢碰