Фиксируем размер ячеек HTML таблицы с помощью CSS3
CMS- Recluse
- 21.05.2017
- 20 504
- 2
- 18.08.2020
- 21
- 20
- 1
- Содержание статьи
- Фиксированный размер ячеек через CSS
- Комментарии к статье ( 2 шт )
- Добавить комментарий
Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном столбце, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td>).
И так, допустим у нас есть таблица со списком исполнителей электронной музыки:
<table> <tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr> <tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr> <tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr> </table>
На данный ширина всех столбцов будет определяться браузером клиента автоматически, чего собственно мы и хотим избежать. Поможет нам в этом следующий CSS код:
table {
table-layout:fixed; width:450px;
}
table td {
overflow:hidden;
}
table td:nth-of-type(1) {
width:200px;
}
table td:nth-of-type(2) {
width:75px;
}
table td:nth-of-type(3) {
width:175px;
}Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.
Важный совет — если у вашей таблицы задан свой определенный класс, то лучше использовать его в таблице CSS, потому что в противном случае данные размеры применятся на любые таблицы, которые расположены на страницах, где используется данный css файл. Допустим, у вашей таблицы следующий код, в котором видно, что класс таблицы — music:
<table> <tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr> <tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr> <tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr> </table>
То и CSS код должен быть следующим:
table.music {
table-layout:fixed; width:450px;
}
table.music td {
overflow:hidden;
}
table.music td:nth-of-type(1) {
width:200px;
}
table.music td:nth-of-type(2) {
width:75px;
}
table.
music td:nth-of-type(3) {
width:175px;
}
music td:nth-of-type(3) {
width:175px;
}И еще одна важная деталь — если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:
table.music {
table-layout:fixed; width:450px;
}
table.music td,
table.music th {
overflow:hidden;
}
table.music td:nth-of-type(1),
table.music th:nth-of-type(1) {
width:200px;
}
table.music td:nth-of-type(2),
table.music th:nth-of-type(2) {
width:75px;
}
table.music td:nth-of-type(3),
table.music th:nth-of-type(3) {
width:175px;
} Изменение размеров таблицы html страницы
Ширина
таблицы задается атрибутом WIDTH. Значение
можно задавать как в абсолютных единицах
(WIDTH=250), так и в относительных (WIDTH=»80%»).
Например, задав значение ширины в 600
пикселей, можно быть уверенным, что
таблица поместится в окне браузера при
любом разрешении монитора.
То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
Пример:
HTML-код: <table border=»1″> <tr> <td><p>Ширина 200 пикселей</p></td> </tr> </table> <br> <table border=»1″> <tr> <td><p>Ширина 60%</p></td> </tr> </table> | Отображение в браузере:
|
Слияние ячеек таблицы html-страницы
При
помощи атрибутов COLSPAN, ROWSPAN можно
объединять несколько соседних ячеек
столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN — ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.
HTML-код: <table border=»1″> <tr> <td rowspan=»3″>1111</td> <td colspan=»2″>22222</td> <td colspan=»2″>33333</td> </tr> <tr> <td>44444</td> <td colspan=»2″ rowspan=»2″>55555</td> <td>66666</td> </tr> <tr> <td>77777</td> <td>88888</td> </tr> <tr> <td colspan=»5″>99999</td> </tr> </table> | Отображение в браузере:
| ||||||||||||||||
Улучшение внешнего вида таблицы html-страницы
Атрибут
CELLSPACING дает возможность задавать размер
полосы чистого пространства, обрамляющих
таблицу извне.
По умолчанию браузер
разделяет ячейки таблицы полосой в 2
пикселя.
Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.
Чтобы графические изображения, помещенные в соседние ячейки таблицы, выглядели как единое целое, надо задать атрибутам CELLSPACING, CELLPADDING нулевые значения.
ширина столбца — CSS: каскадные таблицы стилей
Свойство CSS ширина столбца задает идеальную ширину столбца в макете с несколькими столбцами. Контейнер будет иметь столько столбцов, сколько может поместиться, но ни один из них не будет иметь ширину меньше, чем значение ширина столбца . Если ширина контейнера уже указанного значения, ширина отдельного столбца будет меньше объявленной ширины столбца.
Это свойство может помочь вам создавать адаптивные дизайны, которые подходят для разных размеров экрана.
Особенно в присутствии column-count свойство (которое имеет приоритет), необходимо указать все связанные значения длины, чтобы получить точную ширину столбца. В горизонтальном тексте это width , column-width , column-gap и column-rule-width .
/* Значение ключевого слова */ ширина столбца: авто; /* значения <длины> */ ширина столбца: 60 пикселей; ширина столбца: 15,5 см; ширина столбца: 3,3vw; /* Глобальные значения */ ширина столбца: наследовать; ширина столбца: начальная; ширина столбца: вернуться; ширина столбца: обратный слой; ширина столбца: не задана;
Свойство ширина столбца указывается как одно из значений, перечисленных ниже.
Значения
-
<длина> Указывает оптимальную ширину столбца. Фактическая ширина столбца может отличаться от указанного значения: она может быть шире, когда необходимо заполнить доступное пространство, и уже, когда доступного пространства слишком мало.
-
авто Ширина столбца определяется другими свойствами CSS, такими как
число столбцов.
| Исходное значение | auto |
|---|---|
| Применимо к | Блок-контейнеры, кроме ящиков для упаковки столов |
| Унаследовано | нет |
| Вычисленное значение | абсолютная длина, ноль или больше |
| Тип анимации | длина |
ширина столбца =
auto |
<длина [0,∞]> |
мин контента |
максимальное содержание |
fit-content() ">
=
|
Установка ширины столбца в пикселях
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi
enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
CSS
.content-box {
ширина столбца: 100 пикселей;
}
Результат
| Спецификация |
|---|
| CSS Box Sizing Module Level 3 # column-sizing |
| CSS Multi-column Layout Module Level 1 # cw |
Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
- Макет с несколькими столбцами (Learn Layout)
- Основные понятия Multicol
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять более активное участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Можно ли установить ширину столбцов ячеек таблицы с помощью em? — HTML и CSS — Форумы SitePoint
Волитикс 1
Здравствуйте!
Я пытаюсь найти лучший способ установить ширину ячейки таблицы. Ниже представлена таблица стилей и строка таблицы из расписания игры в бейсбол.
Я хочу максимально приблизить столбцы очков. Если я установлю ширину в 5 пикселей, каждый из них будет близко друг к другу, но число 10 должно будет расширить столбец шире, чем 5 пикселей, чтобы соответствовать.
Вопросы: Если у меня две цифры или буквы в столбце и я устанавливаю размер шрифта с помощью em —
1). Есть ли способ рассчитать ширину букв, а затем приравнять эту ширину к пикселям?
2).
Как лучше всего установить ширину столбца для двух букв или цифр, если я устанавливаю размер шрифта с помощью em?
Я просматриваю веб-сайт w3schools, где рассказывается о настройках em и width с использованием css. Нигде не могу найти там, где написано о том, что мне нужно делать.
таблица стилей:
тело
{
размер шрифта: 100%;
}
тд.один
{
размер шрифта: .90em;
ширина: 75 пикселей;
белое пространство: nowrap;
}
тд.два
{
размер шрифта: .90em;
ширина: 20 пикселей;
}
тд.три
{
размер шрифта: .90em;
ширина: 5 пикселей;
}
тд.четыре
{
размер шрифта: .90эм;
ширина: 20 пикселей;
}
Строка таблицы для бейсбольного счета. Счет 8-10.
Слаггеры округа Лейк
8
<тд>-
<тд>10
Спасибо.
ПолОБ 2
Вам нужна такая точность?
Я бы просто позволил таблице сортироваться самой.
<голова>Документ без названия <тип стиля="текст/CSS"> тело {размер шрифта:100%} тд { граница: 1px сплошная #000; размер шрифта: .90эм; отступ: 2px 5px } td.one{белое пространство:nowrap} <тело> <таблица ячеекспейсинг="0" ячейкападдинг="0">Слаггеры округа Лейк 8 <тд>- <тд>10
Нет необходимости в какой-либо ширине, если у вас нет таблицы фиксированной ширины для начала.
Волитикс 3
Павел;
Спасибо за ответ на мой вопрос.
Таблица для бейсбольного расписания. За сезон будет около пятидесяти игр.
Будет несколько команд. У каждой команды будет таблица с расписанием.
В таблице будет больше, чем просто столбцы, указанные выше. Я указал только четыре столбца, чтобы упростить вопрос.
Также будут столбцы с датами игр, дополнительными иннингами, сносками и дома/в гостях. Таблица должна иметь фиксированную ширину. Я просто пытаюсь найти лучший или правильный способ установить ширину столбцов, чтобы таблица расписаний хорошо работала с максимально возможным количеством браузеров.
ПолОБ 4
Привет,
Опять же, лучший ответ — не делать ничего особенного и позволить таблице справиться с этим. Столбцы будут выравниваться с данными наилучшим образом и будут работать независимо от размера, который пользователь может установить для своего текста.
Если одна колонка должна иметь определенную ширину, вы можете применить ширину к этой колонке и позволить остальным разобраться самостоятельно.