Как зафиксировать таблицу в html
Перейти к содержимому

Как зафиксировать таблицу в html

  • автор:

Задаём размеры отдельных ячеек и столбцов

Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height .

Есть два варианта добавления стилей ячейкам:

  1. Назначать ячейкам уникальные имена классов, например, class=»cell-11″ , и применять стили для этих классов.
  2. Использовать атрибут style , внутри которого можно писать CSS-код.

Пример второго варианта:

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

В этом задании вы зададите ширину столбцов, используя атрибут style . А также увидите отличия между шириной столбцов по умолчанию и заданной вручную.

Перейти к заданию

  • index.html

Фиксация таблицы в html

Мы имеем таблицу, которая располагается по центу нашей страницы. При сдвиге границ она двигается. Вопрос: Как её зафиксировать? ] Полноэкранный режим Сдвиг поля в право

Список ссылок

id name url status delete edit id; ?> name; ?> url; ?> status; ?>

Добавьте таблицу как запускаемый код html . Скриншот может тогда и не пригодится, но даже если нужен, обрежьте его.

20 дек 2016 в 5:25
нужен код а не скриншот
20 дек 2016 в 5:25
Правил и добавил код
20 дек 2016 в 5:39

@J.Jones Уберите код php, оставьте только нужный html . Сделайте код запускаемым. И укажите что значит по центру? Вертикально, горизонтально? При сдвиге страницы куда?

20 дек 2016 в 5:54

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если вам надо зафиксировать таблицу по центру, можно задать блоку с таблицей margin:0 auto; Если вам все же захочется вычислять какой-то хитрый марджин, то css уже давно умеет так (например): margin-left: calc(50vw — 150px); где 50vw — это половина ширины экрана, а 150px (или сколько там надо) — половина ширины таблицы.

Отслеживать
ответ дан 21 дек 2016 в 12:45
3,354 10 10 серебряных знаков 14 14 бронзовых знаков

Укажите margin-left (или margin-right , в зависимости от того где зафиксировать таблицу слева или справа) в пискелях или просто отцентрируйте таблицу через margin: 0 auto; .

UPDATE

Спасибо участнику @Mikl за вдохновение. Только можно не рассчитывать вручную ширину таблицы, а сделать это с помощью свойства transform . Тогда CSS для вашей таблицы будет выглядеть так:

Прокрутка содержимого таблицы

Чтобы сделать таблицу с фиксированной высотой и вертикальной прокруткой потребуется разделить её на две части. В первой будет заголовок таблицы, во второй части, тело в контейнере со свойством overflow-x: auto .

 
Название блюда Белки Жиры Углеводы Ккал
Азу 11,9 14,2 10,2 214 .
CSS-стили:
.scroll-table-body < height: 300px; overflow-x: auto; margin-top: 0px; margin-bottom: 20px; border-bottom: 1px solid #eee; >.scroll-table table < width:100%; table-layout: fixed; border: none; >.scroll-table thead th < font-weight: bold; text-align: left; border: none; padding: 10px 15px; background: #d8d8d8; font-size: 14px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; >.scroll-table tbody td < text-align: left; border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 10px 15px; font-size: 14px; vertical-align: top; >.scroll-table tbody tr:nth-child(even) < background: #f3f3f3; >/* Стили для скролла */ ::-webkit-scrollbar < width: 6px; >::-webkit-scrollbar-track < box-shadow: inset 0 0 6px rgba(0,0,0,0.3); >::-webkit-scrollbar-thumb

Ячейка таблицы: высота и ширина

@hashcode обратите внимание на последний участок кода, и попробуйте обрамить его как надо, у меня не получилось, пришлось извращаться..

3 окт 2011 в 17:31
А у меня получилось. %) Не забываем про магические 4 пробела
3 окт 2011 в 17:51
3 окт 2011 в 18:25
вот вам пожалуйста, 4 пробела ровно, результат виден.
3 окт 2011 в 18:26
В каментах они глючат, ибо текст сперва тримится, как я понял, потом обрабатывается 123
3 окт 2011 в 18:30

если точнее 4 варианта))
но сначало: width — ширина(указывается в пикселах или %) height — высота(указывается так же) 1)

бла бла бла 
бла бла бла 
style.css - td.name 
td.name бла бла бла 

вроде все варианты)))

Отслеживать
ответ дан 3 окт 2011 в 18:32
764 4 4 серебряных знака 20 20 бронзовых знаков
width=»100px» работать не будет. либо целое ( width=»N» ), либо проценты ( width=»N%» )
3 окт 2011 в 18:34
мнда, действительно, голова щас жестоко забита пхп, никак не могу один креатив заставить работать:)
3 окт 2011 в 19:03

text 

Отслеживать
ответ дан 3 окт 2011 в 18:32
14.3k 1 1 золотой знак 22 22 серебряных знака 35 35 бронзовых знаков

Я не хочу спорить. Смахивает на совок: жить стало легче, жить стало веселей. Все отлично, багов нет? вопросов нет.

3 окт 2011 в 18:40

Я ж как бы не спорю, что баги есть, поддержу любое начинание в их репортинге и хантинге) Просто если что-то сделано, скажем, не идеально, это не значит, что дело в самой идее.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *