html — Как задать ширину ячеек таблицы под контент
Подскажите пожалуйста как сделать через инлайновые свойства (письмо верстаю) чтобы ширина каждой ячейки была автоматически подогнана под контент? Проблема в том, что у меня ширина ячейки зависит от ширины самого большого контента в столбце таблицы.
А мне нужно чтобы не было никаких пробелов между ячейками в строке (при этом не объединяя ячейки). Пример кода на облаке и тут:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
</head>
<body>
<table border="1,solid,#000000" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>
<table border="1, solid, #000000" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td>
<table align="center" border="1, solid, #000000" cellpadding="0" cellspacing="0">
<tr>
<td>Значение</td>
<td>@очень_длинная_переменная</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Значение</td>
<td>@переменная</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>@переменная</td>
<td>х</td>
<td>@переменная</td>
<td>@переменная</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
Как вариант для каждой строки создавать отдельную таблицу, а не в одной, как у Вас.
Либо сверстать на дивайдерах.
Итоговый вариант на таблицах:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
</head>
<body>
<table border="1,solid,#000000" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td>
<table align="center" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="1">
<tr>
<td>Значение:
</td>
<td>@очень_длинная_переменная
</td>
</tr>
</table>
</td>
<tr>
<td></td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>Значение:
</td>
<td>@длинная_переменная
</td>
</tr>
</table>
</td>
<tr>
<td></td>
</tr>
<tr>
<td>
<table border="1">
<tr align="left">
<td>@переменная
</td>
<td>x
</td>
<td>@переменная
</td>
<td>@переменная
</td>
</tr>
</table>
</td>
<tr>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
8
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Колонки таблицы равной ширины
Задать вопрос
Вопрос задан
Изменён 1 месяц назад
Просмотрен 2k раз
Я создаю таблицу и выставляю в процентах ширину каждого столбца.
table {
width: 100%
}
table>tbody>tr>td {
width: 20%
}
table>thead>tr>th {
padding: 10px;
overflow: hidden;
}
table>tbody>tr>td:nth-of-type(2) {
width: 30%
}
table>tbody>tr>td:nth-of-type(4) {
width: 10%
}<table border=1>
<thead>
<tr>
<th colspan=3>Group 1</th>
<th colspan=2>Group 2</th>
</tr>
<tr>
<th colspan=1>Group 3</th>
<th colspan=4>Group 4</th>
</tr>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>TooLongColumn4Title</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
</table>- html
- css
- table
1
Задайте таблице word-break: break-all
table {
width: 100%;
word-break: break-all;
}
table>tbody>tr>td {
width: 20%
}
table>thead>tr>th {
padding: 10px;
overflow: hidden;
}
table>tbody>tr>td:nth-of-type(2) {
width: 30%
}
table>tbody>tr>td:nth-of-type(4) {
width: 10%
}<table border=1>
<thead>
<tr>
<th colspan=3>Group 1</th>
<th colspan=2>Group 2</th>
</tr>
<tr>
<th colspan=1>Group 3</th>
<th colspan=4>Group 4</th>
</tr>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>TooLongColumn4Titlesfsgfsfgsdfg</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
</table>4
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
ячеек таблицы — ширина и высота
<тд | Устанавливает ширину ячейки таблицы Устанавливает высоту ячейки таблицы |
..Веб-браузеры автоматически установят размеры строк и столбцов в таблице вашей веб-страницы в соответствии с тем, сколько контента содержится в ячейках вашей таблицы. Поскольку ячейки отображаются в виде сетки, ячейка, содержащая наибольшее количество содержимого, обычно устанавливает ширину и высоту всех соседних с ней ячеек и, следовательно, устанавливает ширину и высоту связанных строк и столбцов в вашей таблице.
Однако вы можете применить атрибуты Эти атрибуты более подробно описаны ниже: ПРИМЕЧАНИЕ. В случае, когда атрибут ширины Пример 1 ниже отображает таблицу шириной 500 пикселей и двумя столбцами. Ширина первой ячейки данных таблицы устанавливается на 25%, что затем устанавливает ширину всех ячеек в столбце 1 на 25% или 125 пикселей (25% от 500 = 125). Ширина всех ячеек в столбце 2 по умолчанию равна остальной ширине таблицы (75%): Пример 1 - ИСХОДНЫЙ КОД Пример 1 — РЕЗУЛЬТАТ ПРИМЕЧАНИЕ. Если атрибут Пример 2 отображает таблицу, которая имеет ширину 500 пикселей и состоит из двух строк. Высота первой ячейки таблицы в строке 1 устанавливается на 100 пикселей, что затем устанавливает высоту всех ячеек в строке 1 на 100 пикселей. Высота строки 2 не зависит от высоты в строке 1. Пример 2 - ИСХОДНЫЙ КОД Пример 2 — РЕЗУЛЬТАТ Ну вот и все для столов. Best Free Stuff Бесплатные текстовые редакторы См. также: Лучший бесплатный веб-хостинг Если вам нужна .COM веб-адрес, вы можете быстро и легко получить его по адресу... Задавать вопрос спросил Изменено
1 год, 7 месяцев назад Просмотрено
701 тысяч раз Многие люди до сих пор используют таблицы для размещения элементов управления, данных и т. Как можно установить ширину столбца таблицы и заставить ее подчиняться, как это делает jqGrid! ? Если я попытаюсь воспроизвести это, даже если я установлю каждые Любые идеи или идеи? 0 Вы можете попробовать использовать стиль таблицы управления тегом http://www.w3schools.com/TAGS/tag_col.asp и это будет ваш CSS 7 Теперь в HTML5/CSS3 у нас есть лучшее решение проблемы. На мой взгляд, рекомендуется это чисто CSS-решение: Вам нужно установить ширину таблицы 3 2 У меня была одна длинная ячейка td таблицы, это вынуждало таблицу к краям браузера и выглядело некрасиво. Я просто хотел, чтобы этот столбец имел только фиксированный размер и разбивал слова, когда он достигал указанной ширины.
Так что это сработало для меня: Вам не нужно указывать какой-либо стиль для элементов table, tr.
Вы также можете использовать overflow:hidden; как было предложено другими ответами, но это приводит к исчезновению лишнего текста. width и height к тегам , чтобы явно задать размеры ячеек таблицы и, таким образом, контролировать ширину и высоту строк и столбцов. width=" пикселей или процентов " ~ Используя атрибут width в тегах , вы можете явно установить ширину ячеек данных таблицы. 
Это приведет к установке не только ширины этой конкретной ячейки, но также установит ширину всего столбца, в котором находится эта ячейка. Вы можете определить либо фиксированную ширину в пикселях, либо относительную ширину (рекомендуется), которая равна проценту от ширины таблицы. установлен более чем в одной ячейке в одном столбце, применяется наибольшая ширина. Аналогичным образом, если содержимое любой ячейки таблицы в этом столбце (например, изображение) превышает указанную ширину, ширина содержимого будет определять ширину ячейки и столбца, в котором оно находится.
Столбец 1 Столбец 2
Столбец 1 < td>Столбец 2
Столбец 1 Столбец 2 Столбец 1 Столбец 2 Столбец 1 Столбец 2 Столбец 1 Столбец 2 height=" пикселей или процентов " ~ Используя атрибут height в тегах , вы можете явно установить высоту ячеек данных таблицы. 
Это приведет к установке не только высоты этой конкретной ячейки, но также установит высоту всей строки, в которой находится эта ячейка. Вы можете определить либо фиксированную высоту в пикселях (рекомендуется), либо относительную высоту, равную проценту от высоты таблицы. высота задан более чем в одной ячейке в одной строке, применяется наибольшая высота. Аналогичным образом, если содержимое любой ячейки таблицы в этой строке (например, изображение) превышает указанную высоту, высота содержимого будет определять высоту ячейки и строки, в которой оно находится.
Строка 1 Строка 1 Строка 1
< tr>Строка 2 Строка 2 Строка 2 Ряд 1 Ряд 1 Ряд 1 Ряд 2 Ряд 2 Ряд 2 
В следующем разделе Iron Spider будут рассмотрены все тонкости , как составлять списки...
для веб-мастеров
Бесплатные графические редакторы
Инструменты анализа веб-сайтов
Бесплатные шаблоны веб-сайтов <~BACK ВЕРХ СЛЕДУЮЩИЙ ~> html — фиксированная ширина ячейки таблицы
д. Одним из примеров этого является популярный jqGrid. Тем не менее, происходит какое-то волшебство, которое я, кажется, не могу понять (это таблицы для крика вслух, сколько волшебства может быть?) , как только содержимое одной из этих ячеек превышает 20 пикселей, ячейка расширяется! table-layout:fixed для или класс таблиц css и установите стиль переполнения
для ячеек
<столбец />
<столбец />
<столбец />
текст
текст
текст
table.
fixed { table-layout:fixed; }
table.fixed td { переполнение: скрыто; }
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;}
Окончательный результат
стол тд
{
макет таблицы: фиксированный;
ширина: 20 пикселей;
переполнение: скрыто;
перенос слов:разрывное слово;
}
