HTML css table width adaptive

Question

How to make table width adaptive? That means, if there is enough room, make it 100%; if the table is too wide and it is clipped, make it auto so that the table columns will not be clipped.

<div>

   <table class="adaptive-table">

   </table>

</div>

Is there a way using CSS? Thanks

Answer 1

If you want use pure CSS this may help you. Set for table.

table-layout: fixed;
width: 100%;

Now, if your table will be too wide, you can scroll td with option overflow: auto;