纯css实现table固定首行、首列以及最后一列冻结
转载:纯css实现table固定首行、首列以及最后一列冻结 - IT民工郑小江 - 博客园 (cnblogs.com)
postion的sticky粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hidden、scroll、auto、overlay时），即便这个祖先不是最近的真实可滚动祖先。
table-layout的fixed
table-layout css属性定义了用于布局表格单元格，行和列的算法。值可以是：auto、fixed。
auto
表格和单元格的宽度取决于其包含的内容。
fixed
表格宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定，其他行单元格的宽度不会影响整列的宽度。
分析：在表格中，某些列需要指定不同的宽度，所以表格的table-layout css属性需要设置为fixed。
页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.table_wrap {
width: 100%;
height: 100px;
overflow: auto;
border-bottom:1px solid #61dafb;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #DDDDDD;
}
/* 表格th/td样式 */
td,th {
width: 150px;
box-sizing: border-box;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
/*超出长度...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 30px;
}
/* 表头固定 */
thead tr th {
position: sticky;
top: 0;
background: #F4F4F5;
height: 30px;
}
/* 首列固定/最后一列固定*/
th:first-child,
th:last-child,
td:first-child,
td:last-child {
position: sticky;
left: 0;
background: #F4F4F5;
text-align: center;
right: 0px;
border-left: 1px solid #DDDDDD ;
width: 100px;
}
/* 表头首列和最后一列强制最顶层 */
th:last-child,
th:first-child {
z-index: 3;
/*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
background: #F4F4F5;
}
</style>
</head>
<body>
<div className="table_wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>栏目1</th>
<th>栏目2</th>
<th>栏目3</th>
<th>栏目4</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>6</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>7</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>8</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>9</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>11</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>12</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>13</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>14</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>15</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>16</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>17</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>18</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>19</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>20</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>21</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>22</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>23</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>24</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>25</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>26</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>27</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>28</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
