0

フレックスボックスを使用してテーブルを作成しています。固定ヘッダーとスクロール可能な本文があります。Windows で、 を使用してスクロールバーを本文に追加するoverflow-y: autoと、ヘッダーと行の間で左揃えが壊れます。Windowsでは、スクロールバーが本文から余分なスペースを取っていますが、ヘッダーはまだ同じスペースを取っているためです。スクロールバーが本文に追加されたときにヘッダー幅を圧縮する方法はありますか?

スクロールバーが存在する場合と存在しない場合でも、ヘッダーと本文の幅が同じであることを確認したい。

    &__item, &--header__item {
      position: relative;
      flex-basis: 20%;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      &.sm, &.lg {
        flex-grow: 0;
      }
      &.sm {
        flex-basis: 40px;
      }
    }
<!-- Header HTML -->

    <ul class="table-list-container">
      <li class="table-list-row">
        <ul class="table-list header">
          <li class="table-list&#45;&#45;header__item sm text-center">
          </li>
          <li class="table-list&#45;&#45;header__item md-padding-left-10">
            Header 1
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 2
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 3
          </li>
          <li class="table-list&#45;&#45;header__item text-center">
            Header 4
          </li>
        </ul>
      </li>
    </ul>

<!-- Body HTML -->

    <div style="height: 305px" class="scrollable">
      <ul class="table-list-container">
        <li class="table-list-row">
          <ul class="table-list body">
            <li class="table-list__item sm text-center">
              <input type="checkbox">
            </li>
            <li class="table-list__item md-padding-left-10">Data</li>
            <li class="table-list__item">Data</li>
            <li class="table-list__item">Data</li>
            <li class="table-list__item text-center">Data</li>
          </ul>
        </li>
      </ul>
    </div>

4

2 に答える 2

3 
overflow-y: overlay;

私のために働いた。スクロール バーは余分なスペースではなく、既存のテーブル スペースからスペースを取るようになったため、列ヘッダーと行は完全に整列されます。

注意：スクロールバーが追加された後、最後の列にコンテンツを表示するのに十分なスペースがあることを確認する必要があります。これは、そこからスクロールバーがスペースを取得するためです。

于 2016-08-18T14:39:54.627 に答える