Держите заголовок таблицы в верхней части сетки при прокрутке

Question

Я знаю, что есть несколько способов написать это, я пробовал (исправил), и так как я не знаком с интерфейсным кодом, я нахожу это сложным.Я обнаружил, что размещение заголовка таблицы в самой таблице и тела таблицы в прокручиваемой таблице -y работает, но мне также нужно, чтобы столбцы выстраивались в линию на основе выпадающего списка пользователя, и если бы я мог избежать этого,улучшит внешний вид, но мне еще предстоит найти решение.

         </div>
      <div v-if="globals.showStructure === true" style="border:1px solid red; max-height:500px;overflow-y:scroll;position:top;" id="tableContainer2">
      <!--<div v-if="globals.showStructure === true" style="max-height:500px;overflow-y:auto" id="tableContainer2">-->
        <table class="table table-bordered">
          <ul class="right-click-menu" tabindex="-1"  v-if="globals.viewActiveStructMenu === true" ref="activeStructure">
           <li v-on:click="deleteStructure()">Delete</li>
           <li v-on:click="pendStructure()">Pend</li>
          </ul>
          <ul class="right-click-menu" tabindex="-1"  v-if="globals.viewPendStructMenu === true" ref="pendStructure">
           <li v-on:click="deleteStructure()">Delete<li>
           <li v-on:click="activateStructure()">Activate</li>
          </ul>
          <thead>
            <tr>
            <th style="width: 36px;" v-if="globals.showActiveToPendCheckbox == true" >Pend </th>
            <th style="width: 38px;" v-if="globals.showActivateCheckbox == true" > Activate </th>
            <th style="width: 58px;" v-if="globals.showDeleteCheckbox == true" > Delete </th>
            <th style="width: 48px;" data-toggle="tooltip" title="Super Summary Code">Sup Sum Code</th>
            <th style="width: 80px;" data-toggle="tooltip" title="Super Summary Description"> Sup Sum Code Desc</th>
            <th style="width: 48px;" data-toggle="tooltip" title="Summary Code">Sum Code</th>
            <th style="width: 122px;" data-toggle="tooltip" title="Summary Code Description">Sum Code Desc</th>
            <th style="width: 115px;" data-toggle="tooltip" title="Family Code">Fam Code</th>
            <th style="width: 81px;" data-toggle="tooltip" title="Secondary Code">Sec Code</th>
            <th style="width: 180px;" data-toggle="tooltip" title="Trade Item Description">GTIN Desc</th>
            <th style="width: 82px;" data-toggle="tooltip" title="GTIN">GTIN</th>
            <th style="width: 40px;" data-toggle="tooltip" title="Status">Status</th>
            <th v-if="globals.showEditColumn == true" style="width: 50px;" title='Edit'>Edit</th>
            </tr>
          </thead>
          <tbody>
          <tr  v-on:mousedown="rowStructClick(fcStructureItem.gtin,false)"  v-for="(fcStructureItem, index) in filteredFamilyCodeStructure"
            :key="fcStructureItem.gtin"
            :id="fcStructureItem.gtin"
            :form.fcStructure="form.fcStructure" tabindex="-1" v-on:contextmenu="openStructMenu($event)"
            :class = "alterRowColors(index)">
              <td v-if="globals.showActiveToPendCheckbox == true">
                <input  type="checkbox" v-model="activeToPendSelected" :value="fcStructureItem.gtin" number>
                </input>
              </td>
              <td v-if="globals.showActivateCheckbox == true">
                <input  type="checkbox" v-model="activateSelected" :value="fcStructureItem.gtin" number>
                </input>
              </td>
              <td v-if="globals.showDeleteCheckbox == true">
                <input  type="checkbox" v-model="deleteSelected" :value="fcStructureItem.gtin" number>
                </input>
              </td>
            <td>
              <span >{{ fcStructureItem.superSummaryCd }}</span>
            </td>
            <td>
              <span >{{ fcStructureItem.superSummaryDesc }}</span>
            </td>
            <td>
              <span >{{ fcStructureItem.summaryCd }}</span>
            </td>
            <td>
              <span >{{ fcStructureItem.summaryDesc }}</span>
            </td>
            <td>
              <span>{{ fcStructureItem.couponFamilyCode }}</span>
            </td>
            <td>
              <span>{{ fcStructureItem.oldCouponFamilyCode }}</span>
            </td>
            <td>
              <span >{{ fcStructureItem.tradeItemDescription }}</span>
            </td>
            <td>
              <span >{{ fcStructureItem.gtin }}</span>
            </td>
            <td>
              <span >{{ fcStructureItem.status }}</span>
            </td>
            <div v-if="globals.showEditButton == true" >
              <td>
                <span>
                  <button  class="btn btn-primary"  title="edit structure item" v-on:click="editStructure(fcStructureItem)">
                    <span> Edit </span>
                  </button>
                  </span>
              </td>
            </div>
          </tr>
          </tbody>
        </table>
      </div>
      <table id="PlaceHolder2"  class="table table-bordered"></table>

        <!-- new grid code is between here>-->

      </div>

Справка по вводу CSS здесь будет отличной, если потребуется.

Answer 1

вы можете использовать новое свойство position: sticky.Когда страница прокручивается по заголовку таблицы, она прилипает к верхней части страницы и остается там.

Для этого вам необходимо определить значение top, которое задает смещение (вероятно, 0)

Но будьте осторожны, стикеры работают не во всех браузерах и особенно глючат в таблицах: https://caniuse.com/#feat=css-sticky

thead {
  /* position: sticky; and top: 0; are the only needed properties here. The rest is for showcase only. */
  position: sticky;
  top: 0;
  background: red;
}

th {
  width: 300px;
  height: 50px;
}

td {
  border: 1px solid yellow;
  height: 200px
}

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

Answer 2

Я решил эту проблему ранее, имея фиксированный макет таблицы CSS (или только 1 столбец может увеличиваться по ширине), и вы создаете пару таблиц.один имеет только заголовки, другой имеет только строки и находится внутри прокручиваемого DIV.По общему признанию это было ~ 10 лет назад и совместимо с IE6 ...

В эти дни вы должны иметь возможность установить CSS для <tbody>, чтобы иметь overflow-x:none и overflow-y:scroll (или авто, если вы не хотите использовать полосу прокрутки).с короткими списками данных), пока ваши <tr> находятся внутри вашего <tbody>

(отредактировано для добавления code tag форматирования, чтобы остановить исчезновение HTML-тегов из текста!)