Полная таблица HTML-таблицы с краем

Итак, у меня есть таблица:

<table border=1>
    <caption>This is a table.</caption>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

и я хочу, чтобы он был как можно шире, оставаясь при этом на 20 пикселей с каждой стороны. Итак, я сделал это:

table{
    border-collapse:collapse;
    margin:20px;
    padding:0;
    width:100%;
}

но в итоге это будет ширина родителя плюс дополнительный 20px-край слева, в результате чего появится вертикальная полоса прокрутки. Есть ли способ сделать его на 40px меньше, чем ширина родителя без добавления другого элемента для его окружения?

jsfiddle: http://jsfiddle.net/pvHNM/

Ответы

Ответ 1

используйте calc() для вычисления предполагаемой ширины:

table {
    margin: auto;
    width: calc(100% - 40px);
}

http://jsfiddle.net/EXS76/1/

Ответ 2

По правилам CSS свойство width задает ширину содержимого элемента, поэтому вам требуется, чтобы 100% доступной ширины было назначено самой таблице, а для полей было выделено дополнительное пространство. Это неизбежно вызывает горизонтальную прокрутку.

В качестве обходного пути вы можете обернуть таблицу внутри элемента div и установить на ней margin.

Ответ 3

Вы можете установить отступы на элементе table. Тед, tbody и tfoot и ряды внутри заполнят пространство в таблице.

table
{
    border-collapse:collapse;
    padding:20px;
    margin:0;
    width:100%;
}

Ответ 4

Я нашел лучший ответ полезным, но он не работает в старых браузерах. То, что лучше всего подходит для меня, было DIV за пределами таблицы, устанавливающей маржу. Тогда на 100% ширину родителя будет влиять этот div, а не родительский элемент.

<div style="margin">
  <table style="width:100%">
  </table>
</div>

Ответ 5

Как насчет использования прокладки так, чтобы таблица растягивалась до полной ширины контейнера, такого как div, но не была уверенна в совместимости?

table:after {
    content: "i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i";
    display: block;
    height: 0em;
    visibility: hidden;
}