Question

我的表有几列。

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

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

Answer 1

试试这个：

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

Answer 2

min-width和max-width属性无法按预期的方式运行表格单元格。来自spec：

在CSS 2.1中，＆＃39; min-width＆＃39;和＆＃39; max-width＆＃39;表，内联表，表格单元格，表格列和列组未定义。

CSS3中没有改变。

Answer 3

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

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

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

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

这对我使用电子邮件脚本有效。

Answer 5

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

Answer 6

如果您使用的是固定布局表即数据表，则

<td style="display:inline-block; min-width: 「…」px;">Foo</td>

OR

<td style="display:inline-block; min-width: max-content;">Bar</td>

Answer 7

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

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等，则不起作用。

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

在移动设备中使用小型或空的 TDs 内容时，您会更好地欣赏这一点

Answer 9

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

来自@Jon的想法。

Answer 10

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

在HTML表格中设置最小宽度

10 个答案: