93

我的表有几列。

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

有什么方法可以min-width在 HTML 表格中设置 col/td 吗？

4

9 回答 9

80

试试这个：

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

于 2013-08-29T06:49:58.633 回答
48

min-width和max-width属性的工作方式与您对表格单元格的期望不同。从规格：

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

这在 CSS3 中没有改变。

于 2015-03-31T22:41:35.940 回答
9

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

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

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

于 2017-10-06T11:45:05.123 回答
2 
<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>

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

于 2019-04-15T08:38:22.360 回答
1

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

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 等，将无法正常工作。

于 2021-01-22T16:16:52.227 回答
1

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

来自@Jon的想法。

于 2021-08-07T11:34:55.537 回答
0

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

于 2018-02-26T14:42:05.730 回答
0

如果您设置了列的百分比宽度，并且您可能足以修复整个表格宽度或设置最小宽度，这是有效的

<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 内容较小或为空的移动设备中，您会更好地欣赏这一点

于 2021-05-29T14:44:14.127 回答
-4 
<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>
于 2013-08-29T06:58:25.360 回答