使⽤html中的table实现内容滚动下拉表头固定不动的⽅法使⽤html中的table实现内容滚动下拉表头固定不动的⽅法
实现效果图
html代码和css样式
<style>
.table-head{padding-right: 17px;background-color:rgba(153, 153, 153, 1);color:rgba(0, 0, 0, 1)}
.table-body{width: 100%;height: 300px;overflow-y: scroll }
.table-head table, .table-body table{width: 100% }
.table-body table tr:nth-child(2n+1){background-color:rgba(242, 242, 242, 1)}
.table-body table tr:hover{backgroud-color: #ddd !important}
</style>
<div >
<div class="table-head">
<table>
<colgroup>
<col />
<col />
</colgroup>
<thead>
<tr><th>序号</th><th>内容</th></tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup><col /><col /></colgroup>
<tbody>
<tr><td>1</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>2</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>3</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>4</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>5</td><td>我是www.qipa250奇葩天地⽹</td></tr>
html横向滚动条样式<tr><td>6</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>7</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>8</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>9</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>10</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>11</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>12</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>13</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>14</td><td>我是www.qipa250奇葩天地⽹</td></tr>
<tr><td>15</td><td>我是www.qipa250奇葩天地⽹</td></tr>
</tbody>
</table>
</div>
</div>
关键之处
1、使⽤了colgroup标签，来对上下两个表格的列宽进⾏了定义，让他们保持⼀致。
2、上边的div .table-head添加了样式padding-right:17px，这个宽度是为了保证跟下边的div .table-body的滚动条保持⼀致，同时下边的表格.table-body添加了样式overflow-y:scroll;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。