Set min-width in HTML table's <td> - html

Question

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?

Answer 1

try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px;border:1px solid red">one</td>
<td style="min-width:100px;border:1px solid red">two</td>
</tr>
</table>

Answer 2

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.

Answer 3

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/

Answer 4

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.

Answer 5

<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.

Answer 6

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.

Answer 7

One way should be to add a <div style="min-width:XXXpx"> within the td, and let the <td style="width:100%">

Answer 8

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

Answer 9

<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>