Table width cell width: html — CSS table-cell equal width

Leave a Comment / Разное / By /

column-width ⚡️ HTML и CSS с примерами кода

Свойство column-width задаёт оптимальную ширину колонки в многоколоночном тексте.

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

Колонки и таблицы
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout
  • vertical-align

Синтаксис

/* Keyword value */
column-width: auto;
/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;
/* Global values */
column-width: inherit;
column-width: initial;
column-width: unset;

Значения

<размер>
Значение ширины колонки в абсолютных единицах CSS (например, пикселях).
auto
Ширина колонок вычисляется автоматически на основе других свойств (column-count, column-gap).

Примечание

Firefox поддерживает свойство -moz-column-width.

Safari, Chrome и Аndroid поддерживают свойство -webkit-column-width.

Значение по-умолчанию:

column-width: auto;

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Спецификации

  • CSS Multi-column Layout Module

Поддержка браузерами

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>column-width</title>
    <style>
      .
  book {
        column-count: 3;
        column-width: 200px;
        -moz-column-count: 3;
        -moz-column-width: 200px;
        -webkit-column-count: 3;
        -webkit-column-width: 200px;
      }
    </style>
  </head>
  <body>
    <div>
      Как было показано выше, кризис жанра дает звукоряд, и
      здесь в качестве модуса конструктивных элементов
      используется ряд каких-либо единых длительностей.
      Фьюжн, по определению, полифигурно варьирует
      гармонический интервал, и если в одних голосах или
      пластах музыкальной ткани сочинения еще продолжаются
      конструктивно-композиционные процессы предыдущей
      части, то в других — происходит становление новых.
      Трехчастная фактурная форма, в первом приближении,
      возможна. Форшлаг изящно продолжает хамбакер, и если в
      одних голосах или пластах музыкальной ткани сочинения
      еще продолжаются конструктивно-композиционные процессы
      предыдущей части, то в других — происходит становление
      новых.
 
 
    </div>
  </body>
</html>

html — ширина ячейки таблицы CSS равна

спросил

Изменено 1 год, 4 месяца назад

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

У меня есть неопределенное количество элементов ячейки таблицы внутри табличного контейнера.

 <дел>
  <дел>
  <дел>

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

Наличие max-width повлечет за собой знание того, сколько у вас ячеек, я думаю?

  • HTML
  • CSS
  • HTML-таблица

2

Вот рабочая скрипта с неопределенным количеством ячеек: http://jsfiddle. net/r9yrM/1/

Вы можете установить ширину для каждого родителя div (таблица ), иначе будет 100% как обычно.

Хитрость заключается в использовании table-layout: fixed; и некоторая ширина каждой ячейки, чтобы вызвать его, здесь 2%. Это вызовет другой алгоритм таблицы , тот, в котором браузеры очень стараются соблюдать указанные размеры.
Пожалуйста, протестируйте с Chrome (и IE8, если нужно). С недавним Safari все в порядке, но я не могу вспомнить совместимость этого трюка с ними.

CSS (соответствующие инструкции):

 раздел {
  дисплей: таблица;
  ширина: 250 пикселей;
  макет таблицы: фиксированный;
}
дел > дел {
  отображение: таблица-ячейка;
  ширина: 2%; /* или 100% согласно комментарию ОП. См. правку о Safari 6 ниже */
}

РЕДАКТИРОВАТЬ (2013 г.): Остерегайтесь Safari 6 в OS X, он имеет макет таблицы: исправлено; неправильно (или, может быть, просто отличается, сильно отличается от других браузеров. Я не проверял макет таблицы CSS2.1 REC 😉 ). Будьте готовы к разным результатам.

7

HTML 

 

  
Ячейка-1

  
Ячейка-2 Ячейка-2 Ячейка-2 Ячейка-2Ячейка-2 Ячейка-2

  
Ячейка-3Ячейка-3 Ячейка-3Ячейка-3 Ячейка-3Ячейка-3

  
Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4


​

CSS 

 .таблица{
  дисплей: таблица;
  ширина:100%;
  макет таблицы: фиксированный;
}
.table_cell{
  дисплей: таблица-ячейка;
  ширина: 100 пикселей;
  граница: сплошной черный 1px;
}

ДЕМО.

3

Просто используя max-width: 0 на дисплее : у меня работал элемент table-cell :

 .table {
  дисплей: таблица;
  ширина: 100%;
}

.таблица-ячейка {
  отображение: таблица-ячейка;
  максимальная ширина: 0px;
  граница: 1px сплошной серый;
} 
 <дел>
  
короткий

  
дооооолго

  
Оооочень долго

2

Заменить

 <дел>
    <дел>
    <дел>

с

 <таблица>
    ячейка с содержимым 1
    ячейка с содержимым 1

Посмотрите на все проблемы, связанные с попыткой заставить элементы div работать как таблицы. Им пришлось добавить table-xxx, чтобы имитировать макеты таблиц 9.0005

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

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

Очень поздний ответ Я знаю, но стоит озвучить.

5

это будет работать для всех

 
 Это также будет работать для данных таблицы, созданных итерацией
 Это можно сделать, установив стиль ячейки таблицы на  width: auto  и пустое содержимое. Столбцы теперь одинаковой ширины, но не содержат контента.
 Чтобы вставить содержимое в ячейку, добавьте 
 div  с помощью css:
 position: absolute;
слева: 0;
сверху: 0;
справа: 0;
внизу: 0;
 
 Также необходимо добавить  позицию: относительная  к ячейкам.
 Теперь вы можете поместить фактическое содержимое в div, о котором говорилось выше.
 https://jsfiddle.net/vensdvvb/
 Вот:
 http://jsfiddle.net/damsarabi/gwAdA/
 Вы не можете использовать ширину: 100 пикселей, потому что отображение представляет собой ячейку таблицы. Однако вы можете использовать максимальную ширину: 100 пикселей. тогда ваша коробка никогда не станет больше 100 пикселей. но вам нужно добавить переполнение: скрытый, чтобы убедиться, что контакт не перетекает в другие ячейки. вы также можете добавить пробел: nowrap, если вы хотите, чтобы высота не увеличивалась.
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 html — Фиксированная ширина ячейки таблицы 
 Задать вопрос
 спросил 
 Изменено
1 год, 5 месяцев назад
 Просмотрено
694k раз
 Многие люди до сих пор используют таблицы для размещения элементов управления, данных и т. д. Одним из примеров этого является популярный jqGrid. Тем не менее, происходит какое-то волшебство, которое я, кажется, не могу понять (это таблицы для крика вслух, сколько волшебства может быть?)
 Как можно установить ширину столбца таблицы и заставить ее подчиняться, как это делает jqGrid!? Если я попытаюсь воспроизвести это, даже если я установлю каждые 
9Тег 0032 управляет стилем таблицы для всех строк, но вам нужно будет установить стиль 
 
 table-layout:fixed  для класса 







    
  , как только содержимое одной из этих ячеек превысит 20 пикселей, ячейка расширится!
 Любые идеи или идеи?
  •  html
  •  css
  •  макет
  •  html-таблица
 0
 Вы можете попробовать использовать 
 
 или таблиц css и установить стиль переполнения   для ячеек
 http:/ /www.w3schools.com/TAGS/tag_col.asp
 <таблица>
    <столбец />
    <столбец />
    <столбец />
    
 и это будет ваш CSS
 table. fixed { table-layout:fixed; }
table.fixed td { переполнение: скрыто; }
 
 5
 Теперь в HTML5/CSS3 у нас есть лучшее решение проблемы. На мой взгляд, рекомендуется это чисто CSS-решение:
 table.fixed {table-layout:fixed; width:90px;}/*Установка ширины таблицы важна!*/
table.fixed td {overflow:hidden;}/*Скрыть текст за пределами ячейки.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Установка ширины столбца 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Установка ширины столбца 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Установка ширины столбца 3.*/ 
 <таблица>
    
 

        текст
        текст
        текст
    


 

        Очень-очень длинный текст
        На самом деле этот текст намного длиннее
        Мы тоже должны использовать пробелыооооооооооооооооооооооооооооо

Вам нужно установить ширину таблицы даже в решении Haunter. В противном случае это не работает.
Также vsync предлагает новую функцию CSS3: word-break:break-all; . Это также разобьет слова без пробелов на несколько строк. Просто измените код следующим образом:

 table.fixed { table-layout:fixed; ширина: 90 пикселей; Word-break:break-all;}

Окончательный результат

3

 стол тд
{
  макет таблицы: фиксированный;
  ширина: 20 пикселей;
  переполнение: скрыто;
  перенос слов:разрывное слово;
}

2

У меня была одна длинная ячейка td таблицы, это вынуждало таблицу к краям браузера и выглядело некрасиво. Я просто хотел, чтобы этот столбец имел только фиксированный размер и разбивал слова, когда он достигал указанной ширины. Так что это сработало для меня:

 
Текст для разрыва здесь

Вам не нужно указывать какой-либо стиль для элементов table, tr. Вы также можете использовать overflow:hidden; как было предложено другими ответами, но это приводит к исчезновению лишнего текста.