adjust main container width according to table width

Question

Is it possible ..if table width increase then its main container widths increase according to that. Is it possible ??

 <div class="container main-con">
    <table class="table table-hover"> <tr><td></td></tr>
     </table>
  </div>

here if data increase in table then table is coming outside the container. so is it possible to increase width of main container according to table width

Answer 1

Having a container that is wider than the screen is almost always a very bad user experience. People (with good reason) don't like to scroll left and right. Instead you are better off making only your table scroll left/right.

You should be able to achieve this quite easily by making the table responsive. from the Bootstrap docs :

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally

For example:

<div class="table-responsive">
    <table class="table table-hover">
        <tr>
            <td></td>
        </tr>
    </table>
</div>