HTML表格中的第二列是（固定的）第一列

Question

我的HTML表格有问题...当我的表格对于页面而言太宽时，我正在尝试使用滚动条。当用户水平滚动时，我希望第一列保持固定。它有效，但表的第二列出现在第一列后面！看起来它来自style="position: fixed"属性。

以下是代码：

<table id="coverageMatrix">
      <!-- Table Headings -->
      <tr>
        <th class="center" style="background: #ddd; position: fixed">ertertert</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
      </tr>
      <tr name="scenarioRaws">
        <th style="position: fixed">qsdqsd</th>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
      </tr>
      <tr name="scenarioRaws">
        <th style="position: fixed">qsdqsd</th>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
      </tr>
      <tr name="scenarioRaws">
        <th style="position: fixed">qsdqsd</th>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
      </tr>
    </table>

Answer 1

使用this codepen code解决了问题：

.fixedTable {
  .table {
    background-color: white;
    width: auto;
    tr { 
      td, th {
        min-width: @cellWidth;
        width: @cellWidth;
        min-height: @cellHeight;
        height: @cellHeight;
        padding: @cellPadding;
      }
    }
  };
  &-header {
    width: (@cellWidth * @cellsWide) + (@cellPadding * 2);
    height: @cellHeight + (@cellPadding * 2);
    margin-left: @cellWidth + (@cellPadding * 2);
    overflow: hidden;
    border-bottom: 1px solid #CCC;
  };
  &-sidebar {
    width: @cellWidth + (@cellPadding * 2);
    height: @cellHeight * @cellsHigh + (@cellPadding * 2);
    float: left;
    overflow: hidden;
    border-right: 1px solid #CCC;
  };
  &-body {
    overflow: auto;
    width: (@cellWidth * @cellsWide) + (@cellPadding * 2);
    height: (@cellHeight * @cellsHigh) + (@cellPadding * 2);
    float: left;
  }
};