Css table cell width

Css table cell width

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 538011f5cd8697f0 • Your IP : 78.85.5.224 • Performance & security by Cloudflare

I have an indeterminate number of table-cell elements inside a table container.

Is there a pure CSS way to get the table-cells to be equal width even if they have differently sized content within them?

Edit: Having a max-width would entail knowing how many cells you have I think?

7 Answers 7

Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/

You can fix a width to each parent div (the table), otherwise it’ll be 100% as usual.

The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.
Please test with Chrome (and IE8- if needed). It’s OK with a recent Safari but I can’t remember the compatibility of this trick with them.

Читайте также:  Epson l110 печатает с полосами

CSS (relevant instructions):

EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn’t proof-read CSS2.1 REC table layout 😉 ). Be prepared to different results.

Таблица без таблицы или display: table-cell для всех браузеров

Перед верстальщиком часто ставят задачу выстроить блоки произвольной ширины в одну линию, например, для ленты фотографий. Эту задачу можно решить в лоб — сделать таблицу, она растянется на нужную длину, и там точно ничего не будет переноситься. Но я расскажу о другом способе.

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

Разметка, например, может быть такой:

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

Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.

Ещё заметки со схожей тематикой

Категории
Коментарии к заметке

В пост врывается inline-block, который с white-space: nowrap у родителя даст как раз то, что нужно.

Кроме того, подобную «ленту» можно довольно удобно двигать влево без лишних врапперов, задавая первому элементу отрицательный левый маджин.

Точно. Элементы с inline-block можно выравнивать по вертикали как в настоящей таблице.

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

Я уж было поверил, что вы действительно нашли способ эмулировать свойство table-cell. А оказывается тут всего лишь давно известный способ расположить блочные элементы в строку, причём как правильно подмечено, это можно сделать более изящно. Самое главное вы, мне кажется, не уловили. Свойство table-cell позволяет элементам не только размещаться в одном ряду, но и заполнять родительский блок полностью, РАСТЯГИВАЯСЬ по всей его ширине. Копируя таким образом поведение ячеек в таблице. Это крайне полезно, к примеру, в вёрстке горизонтальной навигации, где количество пунктов может меняться, но при этом не потребуется менять стили.

Читайте также:  Alcatel программа синхронизации с пк

Роман, чаще всего в реальной жизни не бывает одного универсального способа для решения какой-либо задачи. Мне кажется полезным знать не только «cutting edge» решения (которые тоже не идеальны), а еще и вытаскивать из нафталина что-нибудь старенькое проверенное годами.

По поводу растягивания ячеек я могу предложить только expression. Но, так полагаю, что «это не наш метод». Не поленитесь оставить комментарий, пожалуйста, если найдете что-нибудь интересное по этой теме.

Сегодня целый день пытался всеми известными способами выровнять два блока, и только это решение меня спасло. Благодарен Вам за полезный пост

Насколько я знаю в основном table-cell используют для вертикального выравнивания контента, а при обтекании оно перестает работать. Ну и еще для таких блоков не работают внешние отступы margin.

Отлично! То что нужно. Замечательная альтернатива

В верстке присутствуют ошибка!

Александр, по-моему, всё в порядке с вёрсткой. Ширина ячейки таблицы зависит от контента. Ширина таблицы равна сумме ширин всех её ячеек.

Добавить комментарий

© 2009–2019 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.

Копирование материалов данного блога допускается только с разрешения автора.

Ссылка на основную публикацию
Adblock detector