html table min width,css - Set min-width in HTML table's <td> - Stack Overflow

最新推荐文章于 2023-12-12 22:02:06 发布

陽光院景仁

最新推荐文章于 2023-12-12 22:02:06 发布

阅读量189

点赞数

文章标签： html table min width

本文介绍了当需要为表格设置最小宽度，但又希望宽度总和不超过特定值时的解决方案。作者提供了一种通过JavaScript计算所有列的最小宽度总和，并将其应用于整个表格的方法。这种方法适用于已知所有列宽的情况，但不适用于禁用JavaScript的环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.