От чего измеряется width в % у td?

Question

[FlexibleCurd]

Код.
это 5ть примеров, но все они об одном(сабж).

Answer 1

[Михаил Чирский]

Все таблицы по умолчанию и так в %, и ширина ячейки изменяется от содержимого, ну когда его становится, слишком много, к примеру больше чем ширина родителя, в которой лежит таблица, то ячейка больше не сожмется)

Надеюсь ответил на ваш вопрос.

P.S. Можно легко проверить с табличкой где 6-8 столбиков, и информация не короткая, и сразу все станет ясно

Comments

[FlexibleCurd]

Могли бы вы объяснить как формируется ширина этих ячеек:
jsfiddle.net/0hf71x67/1

[Михаил Чирский]

Конечно, я думал это очевидно) У вас что в этом примере, что в том, который вы кидали в описании, 1 и таже суть, вы задаете ширину первой колонки, а таблицы в отличии от дивов, всегда растягиваются на всю ширину, следовательно берем 1 строчку, в вашем примере, там 1 ячейка равна 1 %, ну 1 % это меньше чем текст, который в ней, и она растягивается на свою ширину, теперь берем 2 ячейку, если вы ей зададите до 6 %, то вы не увидите ничего, никакой разницы, т.к содержимое ее, равно этой ширине.
Иными словами, если вы хотите сделать ширину ячеек одинаковой, нужно это делать для всех, или же если вы ничего не зададите, то они растянутся на макс. свою ширину текста, конечно, есть замечательное св-во: white-space: nowrap; оно ломает представление, ну не всегда.

P.S. все ячейки таблицы зависят друг от друга, если вы хоть 1 измените, то для нее применится св-во, а остальные растянутся на всю свою ширину, иными словами 50 % от 1 колонки, если их 2, и т д. Надеюсь понятно

[FlexibleCurd]

Не совсем, как рассчитывается ширина у ячеек напр. 17 таблицы?

[Михаил Чирский]

Во 1 попробуйте сделать для table: 100;, чтобы увидеть как все тянется, во 2 как я и говорил ранее, все зависит от контента, набросал простой пример, где все колонки 70 % ширины, ну по скольку в посл. текста больше, и там стоит white-space: nowrap; то она самая большая, затем идет 1 колонка 70 % и 2 то, что осталось

jsfiddle.net/unpcbnaf/1

Надеюсь суть ясна, вы взяли для разбора очень тяжелый пример, на вашем бы месте, я бы пробовал более простые, с разным кол-вом текста, и постоянно убирая и добавляя white-space: nowrap; чтобы увидеть эффект

[FlexibleCurd]

А как рассчитывается ширина у ячеек напр. 17 таблицы? :)

P/S.
Ну вы ведь мне не ответили, вот я и переспрашиваю.

[FlexibleCurd]

вы в принципе ответили, но я не такого ответа хотел(ничего такого просто я не совсем вас понимал) :)
вобщем сам немного посидел и понял как оно работает, спасибо за ответ ;)

Answer 2

[FlexibleCurd]

Кстати из этой ситуации можно взять пару интересных вещей:
1. Если взять 2 ячейки в одной задать 1% ширины, то построиться таблица шириной в содержимое этой ячейки умноженное на 100.
Напр. Если взять в первую ячейку положить какой-то содержимое и оно напр. получится 83px то ширина таблицы будет 8300px: 1я ячейка будет шириной 83px, а вторая займет всю остальную ширину до 8300.
jsfiddle.net/4rcqgj0L/2
2. Если взять 2 ячейки и в одной задать 100%, то построится таблица шириной больше чем в 1/3 миллиона пикселей(в зависимости от 2й ячейки) :)
В первую в свою очередь можно добавлять контент и это на ширину не повлияет, но 2я ячейка влияет на общую ширину таблицы(ширина общая может дойти свыше миллиона пикселей.
jsfiddle.net/4rcqgj0L/3

А в контейнере можно этим пользоваться
jsfiddle.net/4rcqgj0L/4
напр. для адаптивной верстки.

И что то подобное есть в бутстрапе:
getbootstrap.com/components/#input-groups-buttons
см. как сверстаны input-group и все что в них.