Таблица с фиксированным заголовком при прокрутке не работает, если она меньше - PullRequest
Новая
       24

Таблица с фиксированным заголовком при прокрутке не работает, если она меньше

0 голосов
/ 08 января 2020

Я пытался редактировать эту таблицу (таблицы) в течение нескольких дней.

План состоит в том, чтобы заголовок всегда был вверху при прокрутке. Поскольку все настроено кодом, я не могу работать с типичными HTML / CSS. Спустя долгое время я нашел это (почти) рабочее решение.

То, что код выглядит так некрасиво, объясняется тем, что я получил эту структуру по наследству, и у меня еще не было времени беспокоиться об этом.

Проблема, которая все еще существует, заключается в том, что когда DIV снаружи меньше, чем нужно таблице, таблица сокращается. Хотя столбцы на самом деле имеют заданную ширину. Если div достаточно широкий снаружи, то таблица выглядит так, как должна.

Что я делаю не так? Может быть, у кого-то есть идея или готовое решение.

Вот как это должно выглядеть (даже если div меньше при прокрутке)

https://jsfiddle.net/mzue3j9t

Образец: 

<div id="GRD1" style="overflow: auto hidden; display: block; position: absolute; top: 22px; left: 20px; width: 400px; height: 176px; font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0); z-index: 1; background-color: threedface; visibility: visible; border: 1px solid rgb(127, 157, 185);">
    <table class="header" cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
        <thead>
            <tr>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 17px; font-weight: normal;" title="undefined">&nbsp;</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 48px; font-weight: normal;" title="">Question</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 19px; font-weight: normal;" title="">i.O</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 29px; font-weight: normal;" title="">n.i.O</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 74px; font-weight: normal;" title="">Another check</th>
                <th style="white-space: nowrap; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 78px; font-weight: normal;" title="">Commentary</th>
            </tr>
        </thead>
    </table>
    <div class="body" style="overflow: hidden auto; height: 100%; width: 100%;">
        <table cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
            <tbody>
                <tr id="row_1">
                    <td id="GRD1_num_1" style="border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;;width:17px;text-align:right;white-space:nowrap;">1</td>
                    <td id="GRD1_0_0" row="1" col="1" editable="1" parentid="0" style="width:48px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Test 1</td>
                    <td id="GRD1_0_1" row="1" col="2" editable="3" parentid="0" checkstate="1" style="width:19px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
                    </td>
                    <td id="GRD1_0_2" row="1" col="3" editable="3" parentid="0" checkstate="0" style="width:29px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" value="0">
                    </td>
                    <td id="GRD1_0_3" row="1" col="4" editable="3" parentid="0" checkstate="1" style="width:74px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
                    </td>
                    <td id="GRD1_0_4" row="1" col="5" editable="1" parentid="0" style="width:78px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 1px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Commentary1</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

и вот так он выглядит, когда он меньше ..

https://jsfiddle.net/mzue3j9t/1

Ответы [ 2 ]

1 голос
/ 08 января 2020

Создайте его всего за 1 столом и сделайте th внутри thead позицию закрепленной. 

<table>
  <thead>
    <tr>
      <th style="background:threedface;position: sticky; top: 0;"></th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      ...
    </tr>
    ...
  </tbody>
</table>

Я не знаю, почему вы пишете встроенные стили. Это шаблон электронной почты? иначе, пожалуйста, создайте отдельный файл css и импортируйте его в html.

0 голосов
/ 08 января 2020

Я бы предложил очистить ваш код, удалить тег стиля из вашего HTML и создать для него файл CSS. Это позволит вам отладить проблему.

В качестве альтернативы, я бы предложил использовать некоторые рамки для таблиц, которые позволят вам работать с учетом размера страницы, поэтому нет необходимости создавать разные классы для каждого размера страницы. Я бы использовал Фреймворк (https://getbootstrap.com/), но есть и другие фреймворки.

...