无法通过滚动冻结CSS的前两列

Question

我要防止前两列滚动。 https://jsfiddle.net/kzqbaLu2/1/

我尝试从此处how do I create an HTML table with fixed/frozen left column and scrollable body?

但是添加后（在我的示例中为注释）：

.headcol {
  position: absolute;
  width: 15em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  margin-top: -1px;
}

.headcol:before {
  content: 'Row ';
}

我的桌子开始显得难看：

我需要防止滚动前两列。

Answer 1

代码中的问题是您同时为两个固定列设置了position: absolute和left: 0。因此它们彼此重叠。

如果您使用的是上一篇文章的答案，则需要添加两个类（这里我使用f-col-1和f-col-2作为固定列）。尝试这样的事情。

body {
  font: 16px Calibri;
}

table {
  border-collapse: separate;
  border-top: 3px solid grey;
}

td,
th {
  margin: 0;
  border: 3px solid grey;
  border-top-width: 0px;
  white-space: nowrap;
}

div {
  width: 600px;
  overflow-x: scroll;
  margin-left: 10em;
  /* sizeoffixedCol * numberofFixedCol */
  overflow-y: visible;
  padding-bottom: 1px;
}

.fixedcol {
  position: absolute;
  width: 5em;
  /* sizeofFixedCol */
  top: auto;
  // border-right: 0px none black;
  border-top-width: 3px;
  margin-top: -3px;
  text-align: center;
}

.f-col-1 {
  left: 0;
}

.f-col-2 {
  left: 5em;
}

.headcol:before {
  content: ' ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div>
  <table>
    <tr>
      <th class="fixedcol f-col-1">1</th>
      <th class="fixedcol f-col-2">9</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">2</th>
      <th class="fixedcol f-col-2">8</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">3</th>
      <th class="fixedcol f-col-2">7</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">4</th>
      <th class="fixedcol f-col-2">6</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">5</th>
      <th class="fixedcol f-col-2">5</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">6</th>
      <th class="fixedcol f-col-2">4</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">7</th>
      <th class="fixedcol f-col-2">3</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">8</th>
      <th class="fixedcol f-col-2">2</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="fixedcol f-col-1">9</th>
      <th class="fixedcol f-col-2">1</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
  </table>
</div>