Ширина ячеек таблицы html: Как установить ширину таблицы через стили?

Leave a Comment / Html / By /

html — Растянуть заголовок таблицы в соответствии с контентом

Вопрос задан

Изменён 23 дня назад

Просмотрен 719 раз

Предисловие: ширина столбца таблицы растягивается в зависимости от содержимого. Кол-во ячеек в заголовке всегда соответствует кол-ву столбцов в теле таблицы. Ширина для thead, tbody — 100%.

Возникла проблема: ширина ячейки заголовка — равна ширине контента. Таким образом, получается что ячейка заголовка не совпадает с ячейкой столбца в теле таблицы, т.е. заголовок съезжает. Как сделать, чтобы ширина ячейки заголовка была равна ширине столбца в теле таблицы? Явно указывать ширину для ячейки заголовка — не подходит, нужно именно сделать зависимость от ширины содержимого в теле таблицы.

Структура HTML такая:

    <thead>
      <tr>
        <th></th>
        <th></th>
            ...
      </tr>
    </thead>
   <tbody>
      <tr>
        <td></td>
        <td></td>
            ...
      </tr>
    </tbody>
  • html
  • css

1

По умолчанию все прекрасно совпадает, это штатное поведение таблиц. Более того, ширина заголовка и тела совпадает даже если стилями задать жесткие различия (я добавил в пример max-width для заголовка и min-width для тела). Если у вас не так — ищите проблему в стилях, может у вас display для частей таблицы переопределен.

td,
th {
  border: 1px solid gray;
  padding: 15px 40px;
}

thead {
  max-width: 200px;
}

tbody {
  min-width: 300px;
}
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как задать ширину столбцов таблицы

17

Ноя,2017

Как задать ширину столбцов таблицы

Проблема

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

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

Причина этого в том, что размеры столбцов корректируются в зависимости от объема содержимого, и даже явные объявления  width считаются не более чем подсказками, как видно на риcунке ниже.


По этой причине нам часто приходится либо использовать другие элементы для отображения табличных данных, либо мириться с непредсказуемостью макета. Существует ли способ заставить таблицы вести себя прилично?

Решение

Решение приходит в форме малоизвестного свойства CSS 2.1 под названием table-layout . Его значение по умолчанию равно  auto , что определяет так называемый алгоритм автоматического расчета табличного макета, демонстрирующий знакомое поведение, показанное на рисунке. Однако у него есть и второе значение,  fixed , обеспечивающее более предсказуемое поведение. Оно дает большую свободу действий разработчику (да, вам!), снимая часть ответственности с механизма визуализации.

 

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

Поскольку содержимое таблицы не влияет на ширину ячеек, никакие элементы во время загрузки страницы не перерисовываются. Всем нам знакома ситуация, когда по мере загрузки страницы таблица постоянно перерисовывается из-за изменения ширины столбцов. С фиксированными табличными макетами об этом можно забыть. Чтобы воспользоваться этой возможностью, необходимо установить данное свойство для элементов  <table> и элементов со свойством  display: table .

Обратите внимание, что для того, чтобы фокус сработал, необходимо обязательно задать значение ширины для этих таблиц (даже если оно равно  100% ). Кроме того, для того чтобы работало свойство  text-overflow: ellipsis , следует также задать ширину соответствующего столбца. Вот и все! Результаты вы видите на рисунке.

table {
table-layout: fixed;
width: 100%;
}

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/table-column-widths

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

(Visited 58 times, 1 visits today)

css — Какова ширина по умолчанию для ячейки таблицы HTML?

спросил

Изменено 7 лет, 3 месяца назад

Просмотрено 12 тысяч раз

Я не смог найти ответ на этот вопрос:

Где в спецификации или в документации UA указана ширина по умолчанию определено?

Я просмотрел HTML Living Standard, HTML5 Recommended и множество других источников.

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

Я ищу официальное подтверждение такого поведения, предпочтительно в документации W3C или пользовательского агента. Но любая авторитетная ссылка приемлема.

  • css
  • html
  • html-таблица
  • w3c

4

Физическая/визуальная ширина ячейки таблицы определяется не HTML, а CSS. В спецификации CSS 2.1 есть целый раздел, посвященный макету таблицы, который дополняет описание табличных данных в HTML.

Кроме того, сам CSS не полностью определяет, как вычисляется ширина ячейки. Это происходит с алгоритмом фиксированной разметки стола:

В алгоритме фиксированной разметки таблицы ширина каждого столбца определяется следующим образом:

  1. Элемент столбца со значением, отличным от «auto» для свойства «width», устанавливает ширину для этого столбца.
  2. В противном случае ячейка в первой строке со значением, отличным от «auto» для свойства «width», определяет ширину для этого столбца. Если ячейка охватывает более одного столбца, ширина делится на столбцы.
  3. Любые оставшиеся столбцы поровну делят оставшееся горизонтальное пространство таблицы (за вычетом границ или расстояния между ячейками).

Тогда ширина таблицы равна наибольшему из значений свойства ‘width’ элемента таблицы и суммы ширин столбцов (плюс расстояние между ячейками или границы). Если таблица шире столбцов, дополнительное пространство должно быть распределено по столбцам.

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

Вот стандарты W3C по расчету ширины столбцов таблицы. В основном это остается за реализующим браузером/агентом.

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

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

Источник: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4

Примечание: это документы HTML4.

1

Минимальная ширина ячейки таблицы равна 0 или размеру самого большого слова или изображения в этой ячейке.

Алгоритм изменения размера таблицы

Алгоритм изменения размера по умолчанию требует двух проходов по данным таблицы.

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

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

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

  1. Минимальная ширина таблицы равна или превышает доступное пространство. В этом случае назначьте минимальную ширину и разрешите пользователю прокручивать по горизонтали. Для перевода на шрифт Брайля необходимо будет заменить ячейки ссылками на примечания, содержащие их полное содержание. По соглашению они появляются перед таблицей.
  2. Максимальная ширина таблицы соответствует доступному пространству. В этом случае установите максимальную ширину столбцов.
  3. Максимальная ширина таблицы больше доступного пространства, но минимальная ширина таблицы меньше. В этом случае найдите разницу между доступным пространством и минимальной шириной таблицы, назовем ее W. Назовем также D разницу между максимальной и минимальной шириной таблицы.

Для каждого столбца пусть d будет разницей между максимальной и минимальной шириной этого столбца. Теперь установите ширину столбца на минимальную ширину плюс d, умноженное на W, на D. Это сделает столбцы с большим количеством текста шире, чем столбцы с меньшим количеством текста.

Затем этот шаг назначения повторяется для вложенных таблиц. В этом случае ширина ячейки вмещающей таблицы играет роль текущего размера окна в приведенном выше описании. Этот процесс повторяется рекурсивно для всех вложенных таблиц.

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

Затем изменяется алгоритм назначения ширины столбца:

  • Если задана явная ширина из атрибута COLSPEC, при условии, что она больше минимальной ширины столбца, в противном случае следует использовать последнюю.
  • Для относительных ширин избыточное пространство W, как определено выше, делится между столбцами соответствующим образом, гарантируя, что каждому столбцу задана по крайней мере его минимальная ширина. Если W равно нулю или отрицательно, ширина столбца должна быть увеличена по сравнению с минимальной шириной, чтобы соответствовать требованиям относительной ширины.

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

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Настройка ширины HTML-таблицы и столбца

web-source.net/graphics/tablebg.gif»>

Предложение проводника к профессиональному дизайну веб-сайтов, дизайну веб-страниц и веб-дизайну рекомендации

любые условия все термины как фраза бесчувственный чувствительный

ТАБЛИЦА HTML tag — это открывающий тег, используемый для создания таблицы на веб-странице.

Вы можете указать ширину HTML TABLE в виде заданного числового значения или использовать процент.

Установить ширину таблицы HTML в пикселях





<ТАБЛИЦА BORDER="2" CELLPADDING="2" CELLSPACING="2">
Столбец 1 Столбец 2

Просмотр в браузере:

Столбец 1 Столбец 2

Задать ширину таблицы HTML как Процент



<ТАБЛИЦА BORDER="2" CELLPADDING="2" CELLSPACING="2">
Столбец 1 Столбец 2

Просмотр в браузере:

Столбец 1 Столбец 2

Установите ширину столбца таблицы HTML в Пиксели





<ТАБЛИЦА BORDER="2" CELLPADDING="2" CELLSPACING="2">
Столбец 1 Столбец 2

Просмотр в браузере:

Столбец 1 Столбец 2

Задать ширину столбца таблицы HTML как Процент

Кроме того, вы можете установить ширину ваших столбцов TABLE для отображения ваших столбцов в конкретная ширина.

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

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