How to stretch one column of a table to fit and reduce the width of others accordingly?
I have a simple HTML table dynamically generated according to user-loaded data. It is wrapped in a div with a class " col-sm-5
" (also wrapped in a " row
" div). I need the table to stay the same size, but for its second column to stretch (change width) to fit its content.
As the second column is stretched, all other columns equally decrease in width between them. Fine, there will be a certain limit on the maximum width of the second column (for example, 60% of the total table width). Here's an example table I'm working with:
<table class="table table-condensed catalog-table dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<tr>
<td>1</td><td>1</td><td>ssssssssssssssss</td><td>3</td>
</tr><tr>
<td>1</td><td>675493859480938590374269824930862436</td><td>67549385</td><td>67549385</td>
</tr><tr>
<td>1</td><td>6.055555555555555555555555555555555555</td><td>56.45</td><td>xyz</td>
</tr><tr>
<td>1</td><td>t</td><td>0</td><td>1</td>
</tr>
</table>
I've tried various combinations of " max-width
", " width
", " white-space:nowrap;
", etc., but nothing works the way I would like.
source to share
You can use the minimum width on another td to make the second responsive:
Html
<table class="table table-condensed catalog-table dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; width:100%">
<thead>
<tr>
<th style="min-width:100px">1</th>
<th >2</th>
<th style="min-width:100px">3</th>
<th style="min-width:100px">4</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1</td>
<td>ssssssssssssssss</td>
<td >3</td>
</tr>
<tr>
<td>1</td>
<td>675493859480938590374269824930862436</td>
<td>67549385</td>
<td>67549385</td>
</tr>
<tr>
<td>1</td>
<td>6.055555555555555555555555555555555555</td>
<td>56.45</td>
<td>xyz</td>
</tr><tr>
<td>1</td>
<td>t</td>
<td>0</td>
<td>1</td>
</tr>
</table>
source to share
The fix to avoid overlap in general would be to add a class .table-responsive
to the table.
But if you don't like the overflow solution at all, I would suggest mimicking your table with a div, or setting a class on your table and providing table and table elements (tr, td, etc.) display: block
or display: inline-block
. Then you can use the rules max-width
you want to apply.
Your table will be a little messy at first until you find the right formula for your needs.
Hope this helps a little.
source to share