table-layout

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

Синтаксис

table-layout: auto | fixed | inherit

Значения

auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает. fixed Ширина колонок в этом случае определяется либо с помощью тега

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

HTML5 CSS2.1 IE Cr Op Sa Fx

     table < table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ >.col1 < width: 160px; >.coln      2012 2013 2014 2015  2016 2017 2018 2019  2020  
 Нефть 5 7 2 8  3 34 62 74 57  
 Золото 3  6 4 6  4 69 72 56 47  
 Дерево 5 8 3 4  7 73 79 34 86

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

HTML!? Можно ли запретить ячейкам td таблицы растягиваться?

вообще-то можно в css, но таблице настанет пипец) )
пример — td < display: block; >— и пиши себе размеры какие угодно. ничего не растянется)) )
штука в том, что ячейка таблицы — элемент с display: table-cell; — такой элемент растягивается в зависимости от контента в нем. если это свойство как-то изменить, то ячейка растягиваться перестанет, но одновременно и перестанет быть ячейкой таблицы.
«обмануть» таблицу обычно можно — правильно расставляя width: и height:, но не всегда. иногда нужны дополнительно скрипты для этого. но тоже есть ограничения. поэтому мой совет — НЕ используйте таблицы для верстки. используйте табличные теги для таблиц. и точка.
а насчет конкретного совета по поводу ячейки — нужна конкретная задача. — т. е. код, а лучше ссылка и описание проблемы.

P.S. прочел в комментарии выше, о чем речь. этому div, который растягивает таблицу — задать нужные размеры по ширине и высоте и overflow — например, ограничим максимальный размер по высоте: max-height: 100px; height: auto!important; height: 100px; overflow-y: auto; — (height: auto!important; height: 100px; — для IE6) — ячейка не будет более 100 пикселей + отступы по высоте. можно добавить width, или max-width — по необходимости. — это с полосой прокрутки. если просто можно «обрезать» содержимое дива, то overflow: hidden;
ограничение по ширине — аналогично.
а насчет конкретного совета по поводу ячейки — нужна конкретная задача. — т. е. код, а лучше ссылка и описание проблемы.

ну тогда интересно можно ли установить этому div конкретные размеры и запретить уже этому div растягиваться, чтоб скроллбар если что появился, если текста много?

п.с. Совет по поводу ячейка и конкретная задача: — много кода, лучше я могу через teamviewers показать что за глюк

Источник

Фиксируем размер ячеек HTML таблицы с помощью CSS3

На данный ширина всех столбцов будет определяться браузером клиента автоматически, чего собственно мы и хотим избежать. Поможет нам в этом следующий 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)

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину. Важный совет — если у вашей таблицы задан свой определенный класс, то лучше использовать его в таблице CSS, потому что в противном случае данные размеры применятся на любые таблицы, которые расположены на страницах, где используется данный css файл. Допустим, у вашей таблицы следующий код, в котором видно, что класс таблицы — music:

 Kraftwerk 1969 Германия
 Deutsch Amerikanische Freundschaft 1978 Германия
 Front 242 1981 Бельгия

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)

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)

Источник

Как предотвратить растягивание таблицы html?

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

ОТВЕТЫ

Ответ 1

Вероятно, вы хотите table-layout:fixed и установить ширину в первых ячейках строки.

Ответ 2

У меня была одна и та же проблема, и я решил ее решить следующим образом:

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

Проверено и проверено на:

Firefox 3.6.18
Chromium-browser 12.0.742.112 (90304), что бы это ни значило
Konqueror 4.5.3
SeaMonkey 2.0.11

Если кто-то (я не могу в моей нынешней ситуации) мог протестировать это в последних версиях IE, Firefox, Chrome, Safari и Opera и оставить комментарий или отредактировать этот ответ, это было бы потрясающе!

Ответ 3

Задайте ширину и высоту тега td с помощью CSS. Затем вам нужно иметь дело с переполнением.

Ответ 4

Предполагая, что у вас нет каких-либо неразрывных пробелов или сверхдолгого текста без пробела в ячейке, мне обычно повезло, явно устанавливая ширину указанной ячейки через CSS (кажется, работает лучше, чем делая что-то вроде «width = ‘100». Если данные в ячейке являются действительно длинной строкой, вы не можете много сделать, кроме как обрезать ее программно, или обернуть данные в div с явной шириной и что-то вроде overflow: hidden/auto (авто, если вы хотите горизонтальную полосу прокрутки или что-то в этом роде).

Ответ 5

Используйте overflow: hidden , чтобы скрыть переполнение как таковое:

Ответ 6

Если вы должны абсолютно иметь таблицу, поддерживающую ее макет даже перед лицом неразрывных пробелов, вам нужно будет использовать:

Однако я бы рекомендовал против этого. IMO, более важно, чтобы данные были читаемыми, чем идеальный макет.

Источник

table-layout¶

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

Демо¶

Синтаксис¶

/* Keyword values */ table-layout: auto; table-layout: fixed; /* Global values */ table-layout: inherit; table-layout: initial; table-layout: revert; table-layout: revert-layer; table-layout: unset;

Значения¶

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

Применяется к тегу или к элементу, у которого значение display установлено как table или inline-table .

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

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

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

 html> head> meta charset="utf-8" /> title>table-layouttitle> style> table  table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ > .col1  width: 160px; > .coln  width: 60px; > style> head> body> table border="1"> col class="col1" /> col span="9" class="coln" /> tr> td>td> td>2012td> td>2013td> td>2014td> td>2015td> td>2016td> td>2017td> td>2018td> td>2019td> td>2020td> tr> tr> td>Нефтьtd> td>5td> td>7td> td>2td> td>8td> td>3td> td>34td> td>62td> td>74td> td>57td> tr> tr> td>Золотоtd> td>3td> td>6td> td>4td> td>6td> td>4td> td>69td> td>72td> td>56td> td>47td> tr> tr> td>Деревоtd> td>5td> td>8td> td>3td> td>4td> td>7td> td>73td> td>79td> td>34td> td>86td> tr> table> body> html>

Источник