Настройка таблицы для отображения: блок

Question

Мне нравится, когда моя таблица ведет себя как элемент блока.Я не могу установить ширину: 100%, потому что у нее есть некоторые отступы, это приведет к 100% + отступы PX.

Check: http://jsfiddle.net/LScqQ

Наконец таблицачто я хочу, вы можете увидеть коробку-тень?Но детям за столом так не нравится ^^

Я думаю, что проблема THAD в THEAD.Они не получают соотношения 66% и 33%.

Требуется помощь ...

Answer 1

Ваш стол должен быть display: table. Если вас беспокоит размер, используйте box-sizing: content-box.

Причина в том, что display: table создает механизм компоновки таблицы, в котором должны быть размечены строки и столбцы; в определенных условиях, если требуемые элементы отсутствуют, они будут созданы неявно, но это может вызвать проблемы. (Вы можете проверить это, создав макет таблицы с div s и установив для них display: table, table-row, table-cell, которые являются стилями пользовательских агентов по умолчанию для table, tr и td элементов. Если вы поиграете с отменой установки стилей в элементах div в различных комбинациях, вы увидите, что иногда браузер неявно неправильно формирует таблицу.)

Таким образом, всегда оставляйте стили display: table-* без изменений, если вы хотите создать фактическую таблицу. Разберитесь с шириной, используя соответствующие стили для этого. Если вы лучше опишите, что вы хотите, возможно, вы сможете получить лучший ответ.

Answer 2

Наконец я нашел ответ сам.

Поместите свою таблицу в контейнер-обертку и напишите правило CSS, подобное следующему:

// HTML

<div class="wrapper-table">
<table>...</table>
</div>

// CSS

.wrapper-table > table
{
    width: 100%;
}

Теперь таблица больше не будет переполнять ваш макет и идеально подходит, как большинство элементов.