实现表格第一列固定

背景

(1) 需求

固定表格的第一列，其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。

(2) 难点

这个功能的难点在于：如果把第一列从表格中抽出，行无法对齐。

(3) 已有解决方案

网上有很多解决方案：

• 固定表格高度，只能显示一列。将第一列抽出固定在最左。
• js动态计算各高度

对于这些方案要不过于繁琐复杂，要不单行显示不利于用户体验。

实现

对于这样的问题，我希望用最简单的方式去解决，避免过多的性能消耗，也更利于维护。

(1) 实现思路

渲染两个表格，其中一个绝对定位覆盖在另外一个表格上并隐藏非第一列。

(2) 缺点

表格html内容渲染了两次。

(3) demo

table{border-bottom: solid 1px black;  border-left: solid 1px black;}
td { border-right: solid 1px black;  border-top: solid 1px black; padding: 10px;}

.container{  position: relative;}

.table1-container, .table2-container{ width: 220px; }

.table1-container{ position: absolute; left: 0; top: 0; overflow: hidden; color: red;}
.table1-container td:first-child{ background-color: white;}
.table1-container td:not(:first-child){ visibility: hidden;}

.table2-container{overflow: scroll;}

<div class='container'>
  <div  class="table1-container">
    <table  border=0 cellpadding="0" cellspacing="0" >
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
      <td>1-6</td>
      <td>1-7</td>
      <td>1-8</td>
    </tr>
     <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
      <td>2-5</td>
      <td>2-6</td>
      <td>2-7</td>
      <td>2-8</td>
    </tr>
     <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
      <td>3-5</td>
      <td>3-6</td>
      <td>3-7</td>
      <td>3-8</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
      <td>4-5</td>
      <td>4-6</td>
      <td>4-7</td>
      <td>4-8</td>
    </tr>
  </table>
</div>
<div class="table2-container">
  <table   border=0 cellpadding="0" cellspacing="0" >
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
      <td>1-6</td>
      <td>1-7</td>
      <td>1-8</td>
    </tr>
     <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
      <td>2-5</td>
      <td>2-6</td>
      <td>2-7</td>
      <td>2-8</td>
    </tr>
     <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
      <td>3-5</td>
      <td>3-6</td>
      <td>3-7</td>
      <td>3-8</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
      <td>4-5</td>
      <td>4-6</td>
      <td>4-7</td>
      <td>4-8</td>
    </tr>
  </table>
  </div>
</div>

完整demo: https://jsfiddle.net/9hdLarfj/