您的位置：首页 > 其它

table表头固定(一个table）

2017-03-09 10:45 393 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="Generator" content="EditPlus®">

 <meta name="Author" content="">

 <meta name="Keywords" content="">

 <meta name="Description" content="">

 <title>Document</title>

 <style>

 div{

 overflow: auto;

 width: 100%;

 }

 table{

 margin:0 auto;

 border-collapse: collapse;

 border: none;

 }

 thead{

 display: block;

 width: 100%;

 }

 tbody{

 display: block;

 height:200px;

 width: 100%;

 overflow-x:auto;

 }

 thead tr th{

 white-space: nowrap;

 border:1px solid #dbeaf9;

 width: 100px;

 }

 td{

 white-space: nowrap;

 width:103px;

 border:1px solid #dbeaf9;

 border-top:0px;

 }

 </style>

 </head>

 <body>

  <div>

   <table>

    <thead>

     <tr>

      <th>表头1</th>

      <th>表头2</th>

      <th>表头3</th>

      <th>表头4</th>

      <th>表头5</th>

      <th style="width:117px;">表头6</th>

     </tr>

    </thead>

    <tbody>

     <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

      <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

     <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

      <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

     <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

      <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

     <tr>

      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>

     </tr>

      <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

      <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

     <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

      <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

     <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

      <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

     <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

      <tr>

      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>

     </tr>

    </tbody>

   </table>

  </div>

 </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航