关闭

固定表头与表格内容对齐 表格内容滚动

63人阅读 评论(0) 收藏 举报
分类:
<div class="table">
   <div class="table-head">
   <table>
       <colgroup>
           <col style="width: 80px;" /><col />
       </colgroup>
       <thead>
          <tr style="height: 45px;">
          <th>序号</th>
          <th>我只是用来测试的</th>
          <th>我只是用来测试的</th>
          <th>我只是用来测试的</th>
          <th>我来测试的</th>
          <th>我来测试的</th>
          </tr>
       </thead>
   </table>
   </div>
   <div class="table-body">
   <table>
       <colgroup><col style="width: 80px;" /><col /></colgroup>
       <tbody>
           <tr>
            <td>1</td>
            <td>我只是用来测试的</td>
            <td>我来测试的</td>
          <td>我来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>2</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>3</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>4</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>5</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>6</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>7</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>8</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>9</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>10</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>11</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>12</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>13</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
          <td>14</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          </tr>
           <tr>
            <td>15</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
           </tr>
       </tbody>
   </table>
   </div>
</div>
<!-- 1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。
2、上边的div .table-head添加了样式 padding-right : 17px ,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式 overflow-y : scroll ; -->
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:287次
    • 积分:41
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档