Таблица в переливной DIV

Question

У меня есть таблица, которая находится в DIV с overflow: auto:

HTML:

<div id="table"> 
    <table> 
    <tr> 
     <th>Heading</th> 
    </tr> 

    <tr> 
     <td>Data</td> 
    </tr> 
    </table> 
</div> 

В общей сложности есть 6 TH-теги и 6 TD теги

CSS:

div#table 
{ 
    overflow: auto; 
    padding: 15px; 
} 

div#table table 
{ 
    border-collapse: collapse; 
} 

Переполнение гарантирует, что на DIV имеется горизонтальная полоса прокрутки, так что полная табуляция e можно просмотреть.

Я также указал прописку на DIV в надежде, что полоса прокрутки и таблица не расположены по краям DIV - однако этот бит не работает.

Так что в основном я хочу, чтобы там было дополнение вокруг DIV, а переполненное содержимое не должно касаться правого края DIV. Я надеюсь в этом есть смысл!

Answer 1

Вам нужно что-то вроде этого? http://jsbin.com/iseda3 если да, вы можете использовать следующий код:

HTML

<div id="table"> 
    <div> 
    <table> 
     <tr> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     </tr> 
     <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     </tr> 
    </table> 
    </div> 
</div> 

CSS

div#table { 
    background:#09F; 
    width:150px; 
} 
div#table div { 
    overflow: auto; 
    margin: 15px; 
} 
div#table table { 
    border-collapse: collapse; 
} 

Answer 2

Похоже, вам нужно обернуть таблицу еще одним элементом <div>, в котором есть требуемая прокладка. Затем ваша таблица будет помещаться внутри этого элемента, но все равно будет подвержена переполнению родительского контейнера.

<div id="table"> 
    <div style="padding: 1em;"> 
    <table> 
    <tr> 
     <th>Heading</th> 
    </tr> 

    <tr> 
     <td>Data</td> 
    </tr> 
    </table> 
    </div> 
</div> 

Answer 3

Вы могли бы хотеть рассмотреть создание контейнера DIV, который имеет отступы, а затем поместить DIV с идентификатором table внутри этого увеличения дел.

div#tableHolder 
{ 
    padding: 15px; 
} 
div#table 
{ 
    overflow: auto; 
} 

div#table table 
{ 
    border-collapse: collapse; 
}