Есть таблица, растянута на всю страницу, блоки отлично изменяют ширину от размера экрана. Но только ставлю display:block таблица маленькая не смотря на width:100% кто объяснит такое явление или где почитать? Хочу разобраться очень. В инете пробовал искать, ничего толкового :(((
Наверно потому, что таблица должна оставаться таблицей... И её базовый стиль disply: table;
А если ищите помощи - оформите вопрос в человеческом виде и выложите код на Codepen или Jsfiddle
Ну и если вкратце, то внутренние элементы tr и td ожидают свойство table у родителя, в противном случае они не понимают как себя вести.
Прекрасно они знают как себя вести :) Если нет родителя с нужным display-свойством, то вокруг ячейки создаются так называемые "фантомные" элементы table-row/table-row-group/table. Их не видно в инспекторе, но они есть. Статью не подскажу, но можете сами поискать или покурить спеку.
Виталий Киренков: Это не извращения. Это базовая теория. Фронтендеру знать обязательно.
Когда вы задаете любому элементу display: table-cell, то он тоже становится ячейкой таблицы. И вот незадача - у вас не получится задать этому элементу ширину в процентах. Например мы хотим центрировать некий текст по горизонтали и вертикали: https://jsfiddle.net/yohxp1uj/ Не работает. Почему?
Зная теорию, вы вспомните, что ячейка не может существовать без таблицы, поэтому она оборачивается необходимыми "фантомными" элементами. А таблица по умолчанию стремится уменьшиться до размера своего содержимого. И тогда вы сделаете так, решив свою задачу: https://jsfiddle.net/yohxp1uj/1/
Сергей: я не спорю, что иногда дивами воссоздавать таблицу удобней, чем просто юзать таблицу. Но вот юзать таблицу, чтобы её потом перестилизовать в дивы - что то как то не айс =)
