HTML表+固定列+位置：相对+没有

Question

我想为具有固定列的HTML表创建一个特定的布局，不使用默认标签（table，tbody，thead，tr，td，th）。

我开发了一个非常好的示例，并意识到我需要将position:relative添加到某些容器中。但是，如果我添加position:relative布局中断...请参阅下面的示例。

所以，这是问题所在。如何创建包含固定/卡住列的表并保存position:relative，如下例所示？

.wrapper {
    overflow-x: scroll;
}

.table, .table-head, .table-row {
  position: relative; /* works perfect WITHOUT this line */
  white-space: nowrap;
}

.table-head .table-cell {
  background: #aaa;
}
.table-cell {
  display: inline-block;
  min-width: 50px;
  border: 1px solid white;
  background: #eee;
}

.fixed {
    position: absolute;
}

<div class="content" style="width: 400px">

  <div class="wrapper" style="margin-left: 50px">

      <div class="table">
        <div class="table-head">
          <div class="table-row">
            <div class="table-cell fixed" style="left: 0px">0</div>
            <div class="table-cell">1</div>
            <div class="table-cell">2</div>
            <div class="table-cell">3</div>
            <div class="table-cell">4</div>
            <div class="table-cell">5</div>
            <div class="table-cell">6</div>
            <div class="table-cell">7</div>
            <div class="table-cell">8</div>
            <div class="table-cell">9</div>
            <div class="table-cell">10</div>
          </div>
        </div>
        <div class="table-body">
          <div class="table-row">
              <div class="table-cell fixed" style="left: 0px">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div>
              <div class="table-cell">f</div>
              <div class="table-cell">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div> 
          </div>
          <div class="table-row">
              <div class="table-cell fixed" style="left: 0px">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div>
              <div class="table-cell">f</div>
              <div class="table-cell">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div>
          </div>
        </div>
      </div>

  </div>

</div>

我在这里获得灵感https://stackoverflow.com/a/42578946/1061438

Answer 1

如果您将.fixed职位更改为此position: fixed怎么办？

＆＃13;

＆＃13;

.wrapper {
    overflow-x: scroll;
}

.table, .table-head, .table-row {
  position: relative; /* works perfect WITHOUT this line */
  white-space: nowrap;
}

.table-head .table-cell {
  background: #aaa;
}
.table-cell {
  display: inline-block;
  min-width: 50px;
  border: 1px solid white;
  background: #eee;
}

.fixed {
    position: fixed;
}

＆＃13;

<div class="content" style="width: 400px">

  <div class="wrapper" style="margin-left: 50px">

      <div class="table">
        <div class="table-head">
          <div class="table-row">
            <div class="table-cell fixed" style="left: 0px">0</div>
            <div class="table-cell">1</div>
            <div class="table-cell">2</div>
            <div class="table-cell">3</div>
            <div class="table-cell">4</div>
            <div class="table-cell">5</div>
            <div class="table-cell">6</div>
            <div class="table-cell">7</div>
            <div class="table-cell">8</div>
            <div class="table-cell">9</div>
            <div class="table-cell">10</div>
          </div>
        </div>
        <div class="table-body">
          <div class="table-row">
              <div class="table-cell fixed" style="left: 0px">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div>
              <div class="table-cell">f</div>
              <div class="table-cell">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div> 
          </div>
          <div class="table-row">
              <div class="table-cell fixed" style="left: 0px">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div>
              <div class="table-cell">f</div>
              <div class="table-cell">a</div>
              <div class="table-cell">b</div>
              <div class="table-cell">c</div>
              <div class="table-cell">d</div>
              <div class="table-cell">e</div>
          </div>
        </div>
      </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;