在 HTML 表的 < td > 中设置 min-width

我的表有几列。

每列应具有依赖于浏览器窗口大小的动态宽度。另一方面，每列不能太小。所以我尝试为这些列设置 min-width，但它不是一个有效的属性。对于 <td>也尝试了 min-width，但是这也是一个无效的属性。

有没有办法在 HTML 表中设置 colt/td 的 min-width？

223259 次浏览
小开
最佳答案

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>

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

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.

小开

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/

小开

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

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

小开

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.

小开

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

小开

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.


提交答案