Set min-width in HTML table's <td>
HtmlCssHtml TableHtml Problem Overview
My table has several columns.
Each column should have dynamic width that depends on the browser window size. On the other hand, each column must not be too tiny. So I tried to set min-width
for those columns but it's not a valid property. Tried min-width
for <td>
as well but that too is an invalid property.
Is there any way to set min-width
for col/td in HTML table?
Html Solutions
Solution 1 - Html
try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
Solution 2 - Html
min-width
and max-width
properties do not work the way you expect for table cells. From spec:
> In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
This hasn't changed in CSS3.
Solution 3 - Html
Try using an invisible element (or psuedoelement) to force the table-cell to expand.
td:before {
content: '';
display: block;
width: 5em;
}
JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/
Solution 4 - Html
<table style="min-width:50px; max-width:150px;">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
This works for me using an email script.
Solution 5 - Html
None of these solutions worked for me. The only workaround I could find was, adding all the min-width sizes together and applying that to the entire table. This obviously only works if you know all the column sizes in advanced, which I do. My tables look something like this:
var columns = [
{label: 'Column 1', width: 80 /* plus other column config */},
{label: 'Column 2', minWidth: 110 /* plus other column config */},
{label: 'Column 3' /* plus other column config */},
];
const minimumTableWidth = columns.reduce((sum, column) => {
return sum + (column.width || column.minWidth || 0);
}, 0);
tableElement.style.minWidth = minimumTableWidth + 'px';
This is an example and not recommended code. Fit the idea to your requirements. For example, the above is javascript and won't work if the user has JS disabled, etc.
Solution 6 - Html
If you need your cells to be large enough to fit the largest word in that column, you can try surrounding that or those specific words with <span style="white-space: nowrap">
; that will cause that specific word to not wrap, forcing the column-width to be a minimum of that dynamic width.
Idea from @Jon.
Solution 7 - Html
One way should be to add a <div style="min-width:XXXpx">
within the td, and let the <td style="width:100%">
Solution 8 - Html
If you have set the percentages width of your columns and for you could be enough to FIX the entire table width or set a minimum width, this is valid
<table style="min-width:1000px;">
or
<table style="width:1000px;">
please note that this is said to work ONLY as inline style
I had this need with a bootstrap 5 table and my code ended to be
<table style="min-width:1000px;" class="table table-striped
table-hover table-bordered text-center table-responsive" id="tabella">
you better appreciate this when in mobile with small or empty TDs content
Solution 9 - Html
<table style="border:2px solid #ddedde">
<tr>
<td style="border:2px solid #ddedde;width:50%">a</td>
<td style="border:2px solid #ddedde;width:20%">b</td>
<td style="border:2px solid #ddedde;width:30%">c</td>
</tr>
<tr>
<td style="border:2px solid #ddedde;width:50%">a</td>
<td style="border:2px solid #ddedde;width:20%">b</td>
<td style="border:2px solid #ddedde;width:30%">c</td>
</tr>
</table>