Setting table column width
How do I set the width so the From and Date are 15% of the page width and the Subject is 70%. I also want the table to take up the whole page width.
13 Answers 13
@Isu_guy you only close
@Zulu according to w3schools.com/tags/att_col_width.asp «The width attribute is not supported in HTML5.»
@Caltor: the code is not using the width attribute ; it is using a CSS *style* width , which is what replaced the width attribute. (despite the multiple people up-voting that comment!!)
table < width: 100%; border: 1px solid #000; >th.from, th.date < width: 15% >th.subject < width: 70%; /* Not necessary, since only 70% width remains */ > From Subject Date [from] [subject] [date]
The best practice is to keep your HTML and CSS separate for less code duplication, and for separation of concerns ( HTML for structure and semantics, and CSS for presentation).
Note that, for this to work in older versions of Internet Explorer, you may have to give your table a specific width (e.g., 900px). That browser has some problems rendering an element with percentage dimensions if its wrapper doesn’t have exact dimensions.
Use the CSS below, the first declaration will ensure your table sticks to the widths you provide (you’ll need to add the classes in your HTML):
table < table-layout:fixed; >th.from, th.date < width: 15%; >th.subject
Actually you only need to specify width of the two columns. The third one will be calculated automatically, so table
Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:
From Subject Date
.mytable td, .mytable th < width:15%; >.mytable td + td, .mytable th + th < width:70%; >.mytable td + td + td, .mytable th + th + th More recently, you can also use the nth-child() selector from CSS3 (IE9+), where you’d just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:
.mytable tr > *:nth-child(1) < width:15%; >.mytable tr > *:nth-child(2) < width:70%; >.mytable tr > *:nth-child(3) The proposed :nth-child solution is horrible in terms of performance. There is no valid reason to use it (especially with the universal selector) in this example where there are only three elements ( th or col ) to style. Additionally, you only need to set width to the th in the first row. The .mytable td in the first example is redundant.
This should be enough: Efficiently Rendering CSS. With your use of the universal selector the browser will first check ALL elements whether they are nth child of another element, then if their direct parent is tr and then whether they belong to .mytable . If you really want to use «nth» then something like this will probably be much better: .mytable th:nth-of-type(1) ; .mytable th:nth-of-type(2) ; . There is also no need to specify the third column width in this case.
Personally I would use classes or just .mytable th+th
I’m aware of that. But those articles are from years back, and there are bigger problems today that CSS selectors, like huge amounts of images and JS code.
Фиксируем размер ячеек 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)
Особенности таблиц
При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.
Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.
Ширина ячеек
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width=»200″ (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Левая колонка Правая колонка
Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.
Чтобы избежать указанной ситуации применяют несколько средств.
Пример 2. Свойство table-layout
.
Результат данного примера показан на рис. 1.
Рис. 1. Отображение рисунка при использовании свойства table-layout
Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).
Рис. 2. Отображение рисунка в браузере Safari
Пример 3. Полосы прокрутки в ячейках
.
Результат данного примера показан на рис. 3.
Рис. 3. Отображение рисунка при использовании свойства overflow
Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | |
| Ячейка 4 | |
Для наглядности код этой таблицы приведен в примере 4.
Пример 4. Таблица с объединенными ячейками
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.
При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.
Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.
Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout , применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
Fixed Table Cell Width
The accepted answer does not work unless you explicitly apply a width for the desired table. Works perfectly whether you use a unit or a percentage. Figured I’d point this out since @totymedli’s answer didn’t get any votes and I didn’t want users to ignore it. However, the word-break suggestion isn’t necessary unless that’s what you’re aiming for.
What happens when you have rows with only 1 TD element that spans multiple columns? Using your sample code, if you had
The word-break suggestion isn’t necessary, but it is useful for the rest of SO users and quite pertinent to the question, as overflowing content in fixed width tables is almost certain to ocurr in most scenarios.
Now in HTML5/CSS3 we have better solution for the problem. In my opinion this purely CSS solution is recommended:
table.fixed /*Setting the table width is important!*/ table.fixed td /*Hide text outside the cell.*/ table.fixed td:nth-of-type(1) /*Setting the width of column 1.*/ table.fixed td:nth-of-type(2) /*Setting the width of column 2.*/ table.fixed td:nth-of-type(3) /*Setting the width of column 3.*/ Veryverylongtext Actuallythistextismuchlongeeeeeer We should use spaces tooooooooooooo
You need to set the table’s width even in haunter’s solution. Otherwise it doesn’t work.
Also a new CSS3 feature that vsync suggested is: word-break:break-all; . This will break the words without spaces in them to multiple lines too. Just modify the code like this: