Clever Geek Handbook

How do I make the div width fit the table that is inside the div?

If it table

is inside div

and the width of the table is not clear what could be even wider than the width of the screen, how to make the table div

containing this table adjusted by the width of the table? Since it div

was set padding: 10px

, when the table exceeds the width of the screen, padding-right

it becomes invisible.

Here is the code:

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


source to share


2 answers


I found a method.

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


The key why it might work is "mapping". You can find out the differences from block, inline and inline block. hope this helps

0


source


I think you want something like this

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;
}
0


source






More articles:


All Articles