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>
效果圖
