在 HTML 表格的 <td> 中设置最小宽度

【问题标题】：Set min-width in HTML table's <td>在 HTML 表格的 <td> 中设置最小宽度
【发布时间】：2013-09-01 11:13:58
【问题描述】：

我的表有几列。

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

有没有办法在 HTML 表格中为 col/td 设置min-width？

【问题讨论】：

在中添加一个
并将它的 min-width 设置为任何你想要的
如果你绝对必须使用你应该看到这个：stackoverflow.com/questions/6426779/…
带 px - 是的；有 % - 没有 :(

标签： html css html-table

【解决方案1】：

试试这个：

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

【讨论】：

这是公认的答案，但请看下面的答案：stackoverflow.com/a/29379832/207552，看起来结果未定义。
非常糟糕的方法！ 1) 使用绝对宽度是完全不可接受的，并且 2) 必须对表中的所有重复这种样式，而不是在样式表中只使用一次！
@Apostolos 为什么不能接受绝对宽度？这取决于用例。当然，您也可以使用适当的选择器和/或类名来代替内联样式。这只是一个最小的例子。该答案的问题在于，规范说，它具有未定义的行为。
这很糟糕，因为 1) 它取决于屏幕宽度 并且 2) 它适用于 所有表格，这可能不太好。 (1) 使用百分比处理，(2) 使用类名处理。

【解决方案2】：

min-width 和 max-width 属性无法按照您对表格单元格的预期方式工作。来自spec：

在 CSS 2.1 中，'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。

这在 CSS3 中没有改变。

【讨论】：

实际上这在CSS3 box model 中发生了变化，属性应用于“所有元素，但未替换的内联元素、表格行和行组”
td 上的最小宽度和最大宽度适用于 px，但不适用于 %（最新的 Chrome）
关于 CSS3 中的更改，这并没有直接更改为表格，但是您可以将 td 更改为具有 'display: block' 或 'display:inline-block' 然后它将尊重 min-宽度。但是请注意，这样做会丢失其他表格单元格格式 - 例如自动换行。

【解决方案3】：

尝试使用不可见元素（或伪元素）来强制表格单元格展开。

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle：https://jsfiddle.net/cibulka/gf45uxr6/1/

【讨论】：

您的链接已失效，您的解决方案对我不起作用！
我认为，如果你有table-layout: fixed;，这将不起作用。

【解决方案4】：

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

这适用于我使用电子邮件脚本。

【讨论】：

那么这应该是评论，而不是答案，我的主

【解决方案5】：

这些解决方案都不适合我。我能找到的唯一解决方法是将所有最小宽度尺寸加在一起并将其应用于整个表格。这显然只有在您了解所有列大小的情况下才有效，我就是这样做的。我的表格看起来像这样：

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

这是一个示例代码，不推荐使用。使想法符合您的要求。例如，上面是javascript，如果用户禁用了JS等，将无法工作。

【讨论】：

【解决方案6】：

如果您需要您的单元格足够大以容纳该列中最大的单词，您可以尝试用<span style="white-space: nowrap"> 包围该或那些特定的单词；这将导致该特定单词不换行，从而强制列宽为该动态宽度的最小值。

来自@Jon的想法。

【讨论】：

【解决方案7】：

一种方法应该是在 td 中添加一个<div style="min-width:XXXpx">，然后让<td style="width:100%">

【讨论】：

【解决方案8】：

如果您已设置列的百分比宽度，并且足以修复整个表格宽度或设置最小宽度，则此设置有效

<table style="min-width:1000px;">
or
<table style="width:1000px;">

请注意，据说这只能作为内联样式使用

我需要一个 bootstrap 5 表，我的代码最终变成了

<table style="min-width:1000px;" class="table table-striped 
table-hover table-bordered text-center table-responsive" id="tabella">

在 TD 内容较小或为空的移动设备中，您最好欣赏这一点

【讨论】：

【解决方案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>

【讨论】：

以百分比定义宽度只是让它根据窗口大小动态，但我想要的是动态宽度和最小宽度