Использование CSS, чтобы сделать заголовок липким и прокрутить тело - PullRequest
Новая
       58

Использование CSS, чтобы сделать заголовок липким и прокрутить тело

0 голосов
/ 11 апреля 2020

Я пробовал несколько версий этого, и я всегда возвращаюсь либо к заголовку, увеличивающемуся по размеру при прокрутке, либо к ячейкам th и td, не имеющим одинаковую ширину. Пожалуйста, посмотрите эту скрипку для полных html и css: она прекрасно прокручивается, но вы увидите, что th и td постепенно расходятся друг с другом. https://jsfiddle.net/paul724/0gL74yd1/4/# & Togetherjs = udj4PqtUOg 

<table>
    <thead>
    <tr>
        <th class="th-right" >Fruit</th>
        <th class="td-left" >Colour</th>
        <th class="td-left" >Status</th>
        <th class="th-right" >Number
        <span class="up" text-align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; back to top &uarr;<span>
        </th>
    </tr>

1 Ответ

1 голос
/ 12 апреля 2020

Вы указали ширину td и th в процентах. Если ширина указана в процентах, то столбец «td» или «th» корректирует свой размер в соответствии с процентным размером слова, записанного внутри. «Процент» используется для определения ширины содержащего блока.
Так в строке нет. «33» вашего заданного на скрипке изменения ширины в пикселях по желанию. Попробуйте использовать приведенную ниже коррекцию. Это исправляет несоответствие. 

tbody td, thead th {
    width: 150px;
    float: left;
}

Для закрепления верхнего и нижнего колонтитулов. Вам необходимо добавить следующее css. Для нижнего колонтитула нужно просто зафиксировать нижнюю часть как 0. 

 .th{
     position: sticky;
     top:0;
    }
.footer th{
   position: sticky;
   bottom:0;
   }

Чтобы сделать всю таблицу такой же ширины, как 4 столбца содержимого:

Эта проблема возникает из-за того, что вы использовали уровень блока элементы по настройке дисплея: блок. Из-за фиксированной ширины 100%, но в коде также фиксируется ширина 100 пикселей и с плавающей точкой: выполняется слева, из-за чего, если содержимое внутри блока превышает 100 пикселей, оно переходит к следующему блоку.

Решение: просто удалите дисплей: block и float: left и не фиксируйте ширину как 100px.

...