html代码中如何固定一个table的表头呢?


摘要:
下文讲述html代码中固定表头的方法分享,如下所示:

实现思路: 
      1.将表头和表内容放入两个table中
      2.表内容所处的表设置overflow-y hidden ,使高度超过指定值时,出现滚动
      3.表头和表内容中都使用 colgroup col关键字定义宽度
      <colgroup>
              <col style="width:100px;" />
               <col />
      </colgroup>

例:
定义一个固定表头的html代码

<meta charset='utf-8' />
<p>
  maomao365.com <br />
  table固定表头的示例分享
</p>
<hr />
<style>
.table-head{padding-right:17px;background-color:blue;}
.table-head tr th{color:white;}
.table-body{width:100%; height:200px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-body table tr:nth-child(2n+1){background-color:RGB(242,242,242);}
</style>

<div style="width:400px;">
    <div class="table-head">
    <table>
        <colgroup>
            <col style="width:120px;" />
            <col />
        </colgroup>
        <thead>
            <tr><th>序号</th><th>内容</th></tr>
        </thead>
    </table>
    </div>
    <div class="table-body">
    <table>
        <colgroup><col style="width: 120px;" /><col /></colgroup>
        <tbody>
            <tr><td>1</td><td>猫猫教程固定表头内容--1</td></tr>
            <tr><td>2</td><td>猫猫教程固定表头内容--2</td></tr>
            <tr><td>3</td><td>猫猫教程固定表头内容--3</td></tr>
            <tr><td>4</td><td>猫猫教程固定表头内容--4</td></tr>
            <tr><td>5</td><td>猫猫教程固定表头内容--5</td></tr>
            <tr><td>6</td><td>猫猫教程固定表头内容--6</td></tr>
            <tr><td>7</td><td>猫猫教程固定表头内容--7</td></tr>
            <tr><td>8</td><td>猫猫教程固定表头内容--8</td></tr>
            <tr><td>9</td><td>猫猫教程固定表头内容--9</td></tr>
            <tr><td>10</td><td>猫猫教程固定表头内容--10</td></tr> 
        </tbody>
    </table>
    </div>
</div>
html固定表头的示例分享

html固定表头的示例分享