Html ширина ячеек таблицы: Ширина таблицы | htmlbook.ru

Leave a Comment / Html / By /

css — Ширина ячейки по содержимому + text-overflow

Вопрос задан

Изменён 6 лет 1 месяц назад

Просмотрен 24k раз

Есть таблица фиксированной ширины, состоящая из двух колонок. Необходимо с помощью css выставить: ширину левой колонки — по содержимому, ширину правой — остаток (ширина таблицы — ширина первой колонки) и если необходимо обрезать текст. Пробовал

.table {
    width: 100%;
    table-layout: fixed;
}
.table td:last-child {
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
}

В данном случае текст в ячейках «налазит» друг на друга. Пробовал другие способы (без table-layout: fixed) — ширина таблицы увеличивается. То есть нужен такой вариант:

Column1 | Column2
Foo       BarBar
Column1     | Co2
Foooooooooo   B.
 
 ..
  • css
  • вёрстка

Если я правильно подозреваю, что колонка, которая по содержимому, не должна содержать многострочный текст, то это делается так:

table {
  width: 100%;
}

tr :first-child {
  width: 0;
  white-space: nowrap;
}

tr :last-child {
  width: 100%;
}
<table>
  <tr>
    <th>Первая колонка
    <th>Вторая колонка
  </tr><tr>
    <td>Какая-то метка
    <td>Есть таблица фиксированной ширины, состоящая из двух колонок. Необходимо с помощью css выставить: ширину левой колонки - по содержимому, ширину правой - остаток (ширина таблицы - ширина первой колонки) и если необходимо обрезать текст. Пробовал
  </tr>
</table>

Упс.. Не заметил, что многоточие надо. Тогда так:

table {
  width: 100%;
  line-height: 1.5em;
}

tr > :first-child {
  width: 0;
  white-space: nowrap;
  vertical-align: top;
}

tr > :last-child {
  width: 100%;
  position: relative;
  vertical-align: top;
}

tr > :last-child > div {
  position: absolute;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<table>
  <tr>
    <th>Первая колонка
    <th>Вторая колонка
  </tr><tr>
    <td>Какая-то метка
    <td><div>Есть таблица фиксированной ширины, состоящая из двух колонок.  Необходимо с помощью css выставить: ширину левой колонки - по содержимому, ширину правой - остаток (ширина таблицы - ширина первой колонки) и если необходимо обрезать текст. Пробовал</div>
  </tr>
</table>

Единственное, что пришло в голову — это сымитировать поведение таблицы дивами. То есть: html:

<div>
    <div>
        <div>Very-Very Big Content</div>
        <div>Content</div>
    </div>
</div>

css:

.clearfix {*zoom: 1;}
.clearfix:before,
.clearfix:after {display: table; line-height: 0; content: ' ';}
.clearfix:after {clear: both;}
.table {
    width: 100%;
    display: table;
}
.table .tr {display: table-row; background: #bbb;}
.table .tr .td {display: table-cell; padding: 3px;}
.table .tr .td:last-child {
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 60px; /* ну это на свое усмотрение, естественно */
}

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

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

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

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

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

Почта

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

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

Почта

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

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

CSS table-layout

HTML5CSS.

ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Настройка различных алгоритмов макета таблицы:

table.a {
    table-layout: auto;
    width: 180px;
}

table.b {
    table-layout: fixed;
    width: 180px;
}

Определение и использование

Свойство table-layout определяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов.

Совет: Основное преимущество табличной компоновки: Исправлено; является то, что таблица делает гораздо быстрее. На больших таблицах пользователи не увидят ни одной части таблицы до тех пор, пока браузер не выведет всю таблицу целиком. Таким образом, если вы используете табличную компоновку: Fixed, пользователи увидят верхнюю часть таблицы, пока браузер загружает и отображает оставшуюся часть таблицы. Это создает впечатление, что страница загружается намного быстрее!

Значение по умолчанию:auto
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS2
Синтаксис JavaScript:object.style.tableLayout=»fixed»

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

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

Свойство
table-layout14.05.01.01.07.0

Синтаксис CSS

table-layout: auto|fixed|initial|inherit;

Значения свойств

ЗначениеОписание
autoБраузеры используют автоматический алгоритм макета таблицы. Ширина столбца задается самым широким неразрывным содержимым ячеек. Содержимое будет диктовать макет
fixedУстанавливает алгоритм фиксированного макета таблицы. Ширина таблицы и столбца устанавливается по ширине таблицы и Col или по ширине первой строки ячеек. Ячейки в других строках не влияют на ширину столбцов. Если в первой строке нет ширины, ширина столбцов делится равномерно по всей таблице, независимо от содержимого внутри ячеек
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Table

HTML DOM Справочник: tableLayout Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки

как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Office Open XML (OOXML) — Обработка текстов — Свойства ячеек таблицы

Связанное обсуждение Open Office/ODF
Связанное обсуждение HTML/CSS

Свойства ячейки таблицы — Ширина

Предпочтительная ширина отдельной ячейки таблицы указывается с помощью < w:tcW> внутри элемента . Любая ширина в таблице считается предпочтительной, поскольку ширина столбцов может конфликтовать, а правила компоновки таблицы могут требовать переопределения предпочтения. Если этот элемент опущен, то ширина ячейки имеет тип auto.

Ссылка: ECMA-376, 3-е издание (июнь , 2011), Справочник по основам и языку разметки, § 17.4.68.

Word 2007 Пример:

Для предпочтительной ширины таблицы ниже () установлено значение auto. В первой ячейке установлено значение 33,3%, как в примере выше. В приведенных ниже примерах показано влияние изменения содержимого в ячейке.

Атрибуты:

Атрибуты:

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

Примечание. В версии стандарта OOXML 2006 г. указано, что значение должно быть десятичным. Когда type=»pct», значение интерпретировалось как пятая доля процента, поэтому 4975=99,5%, и в атрибуте не было символа %. В версии 2011 значение может быть либо десятичным, либо процентным, поэтому символ % должен быть включен, когда type=»pct».

тип Указывает единицы измерения свойства ширины (w). Возможные значения:
  • auto — указывает, что ширина определяется общим алгоритмом компоновки таблицы.
  • dxa — указывает, что значение находится в двадцатых долях пункта (1/1440 дюйма).
  • nil — указывает нулевое значение.
  • pct — указывает значение в процентах от ширины таблицы.

Ширина ячейки задается с помощью атрибута style:column-width элементадля стиля,применяемого к столбцу ячейки. Значение является положительным числом.

Существует также атрибут style:rel-column-width,который указывает относительную ширину столбца. Значение — это число,за которым следует * (U+002A,ЗВЕЗДОЧКА).

Ссылка:формат открытого документа для приложений Office,версия 1.2 (май 2011 г.),§§ 17.16 и 20.247.

. . .

Пример CSS:

Так и есть…
Так и с нашим прошлым. Напрасно пытаться вернуть его:все усилия нашего интеллекта должны оказаться тщетными.ВВВ ССС
ДДД ЕЕЕ ФФФ
ГГГ ЧЧЧ III


<таблица>

Так и есть…

. . .

ААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААА ВВВ ССС
ДДД ЕЕЕ ФФФ
ГГГ ЧЧЧ III


Максимальная ширина ячейки таблицы? —HTML и CSS —Форумы SitePoint

ReGGaeBOSS

#1

У меня есть это:

<дел><дел><дел><дел><дел>
<дел><дел><дел>
.категория{дисплей:таблица;ширина:100%}.категория .категория{ширина:25%;фон:#еее;граница:5px сплошная #fff;отображение:таблица-ячейка}

И моя проблема в том,что даже при задании «категории» ширины 25% она получит ширину 50%,если в «категории» только две «категории». Я хочу дать каждой фиксированную ширину 25%,возможно ли это при использовании ячеек таблицы?

ПолОБ

#2

Привет,

Вы создаете таблицу с 2 ячейками и задаете им ширину 25%. В сумме это не составит 100%,поэтому ячейки будут растянуты,чтобы соответствовать таблице.

Если бы вы сохранили всю партию в одной таблице,ваши ячейки соответствовали бы ширине:

,например. 

 w3.org/TR/html4/strict.dtd"><голова>Документ без названия<тип стиля="текст/CSS">.категория{дисплей:таблица;ширина:100%}.категория .категория{ширина:25%;фон:#еее;граница:5px сплошная #fff;отображение:таблица-ячейка}.tr{отображение:таблица-строка}<тело><дел><дел><дел>1<дел>2<дел>3<дел>4
<дел><дел>1<дел>2