2015-05-14 7 views
3

Если table находится внутри div, а ширина таблицы неясна, что может быть даже шире ширины экрана, как сделать div, содержащий этот стол, настроить ширину таблицы? Поскольку div был установлен padding: 10px, когда таблица превышает ширину экрана, padding-right становится невидимым.Как сделать ширину div подходящей для таблицы, которая внутри div?

Вот код:

<div class="panel-body"> 
    <table class="table table-hover table-bordered"></table> 
</div> 
+0

Не могли бы вы показать нам контекст этого кода, а также предоставить CSS? jsFiddle будет потрясающим (http://jsfiddle.net). – PavKR

+0

Ну, думаю, этого кода недостаточно, чтобы решить вашу проблему. Поместите свой код HTML и CSS, чтобы решить вашу проблему, или создайте DEMO на [JSFiddle] (http://www.jsfiddle.net/) – divy3993

ответ

0

Я нашел способ.

.panel-body{ 
    display: inline-block; 
    padding: 10px; 
} 

ключа, почему он может работать в «дисплей» .Вы может узнать отличие от блока, инлайн и встроенного блока. надеюсь, что это поможет

+0

Это решило мою проблема. Но панель и таблица не отображают полную ширину, основанную на разрешении экрана. Если разрешение screeen составляет 1440px * 900px, только когда минимальная ширина таблицы установлена ​​на, например, 1130px, корпус панели выглядит нормально, но все равно выглядит ненормальным, если разрешение экрана изменилось. – wqz722

+0

Я не понимаю, что вы говорите, можете ли вы закодировать демо в JSbin или Jsfiddle? – youngwind

0

Я думаю, что вы хотите что-то вроде этого

JSFiddle

HTML

<div class="panel-body"> 
<table class="table table-hover table-bordered" border=1> 
    <tr> 
     <td> R1C1 </td> 
     <td> R1C2 </td> 
    </tr> 
    <tr> 
     <td> R2C1 </td> 
     <td> R2C2 </td> 
    </tr> 
    <tr> 
     <td> R3C1 </td> 
     <td> R3C2 </td> 
    </tr> 
</table> 
</div> 

CSS

html, body 
{ 
    width:100%; 
    margin:0%; 
} 

.panel-body 
{ 
    margin:0%; 
    width:100%; 
    background:#ccc; 
    height:auto; 
    padding:5px 0px; 
} 

.panel-body table 
{ 
    margin:0; 
    width:100%; 
    text-align:center; 
}