纯css实现table固定首行、首列（主要应用在移动端）

postion的sticky粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hidden、scroll、auto、overlay时），即便这个祖先不是最近的真实可滚动祖先。

table-layout的fixed

table-layout css属性定义了用于布局表格单元格，行和列的算法。值可以是：auto、fixed。

auto

表格和单元格的宽度取决于其包含的内容。

fixed

表格宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定，其他行单元格的宽度不会影响整列的宽度。

分析：在表格中，某些列需要指定不同的宽度，所以表格的table-layout css属性需要设置为fixed。

css代码

.table_wrap{

  width:100%;
  height:200px;
  overflow: auto;
  border-bottom:1px solid #61dafb;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse:separate;
  border-spacing:0;
  border:0;
  
}
  
 td, th{
  width:150px;
  box-sizing: border-box;
  border-right:1px solid red;
  border-bottom:1px solid red;
  /*超出长度...*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

 }

 thead tr th {
  position:sticky;
  top:0;
  background:#61dafb;
 }

 th:first-child, td:first-child {
  position:sticky;
  left:0;
  background:#61dafb;
 }
 th:first-child {
  z-index:1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
  background:#61dafb;
 }
           

html代码

<div className="table_wrap">
    <table>
    <thead>
      <tr>
        <th>11111111111111111111111111111</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </tbody>
    
  </table>

</div>
           

效果