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

76

我的表有几列。

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

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

html css html-table

— Thanhma San
source

3

在<td>内添加一个<div>并将其最小宽度设置为所需的大小

— Shadow

3

如果你绝对必须使用<TD>你应该看到这一点：stackoverflow.com/questions/6426779/...

— 斯泰西驻军

用px-是; 与％-否:(

— dszakal

68

试试这个：

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

展开摘要

— 阿里（AliSağırvelioğulları）
source

6

这是可接受的答案，但请看下面的答案：stackoverflow.com/a/29379832/207552，结果似乎不确定。

— bschandramohan 2015年

很糟糕的方法！1）使用绝对宽度是完全不能接受的，并且2）必须重复对表中的所有<td>重复使用此样式，而不是在样式表中仅使用一次！

— Apostolos

@Apostolos为什么绝对宽度不能接受？这取决于用例。当然，您也可以使用适当的选择器和/或类名代替内联样式。这只是一个最小的例子。规格说明中的问题是，它具有不确定的行为。

— trixn

这很糟糕，因为1）它取决于屏幕宽度，并且2）它适用于所有表，可能不行。（1）使用百分比处理，而（2）使用类别名称处理。

— Apostolos

38

min-width和max-width属性不能像您期望的那样工作。根据规格：

在CSS 2.1中，“最小宽度”和“最大宽度”对表，内联表，表单元格，表列和列组的影响是不确定的。

CSS3中没有改变。

— 卵
source

11

实际上，这在CSS3盒模型中已经改变，并且属性被应用于“除未替换的内联元素，表行和行组之外的所有元素”

— cyberskunk 2015年

td上的min-width和max-width适用于px，但不适用于％（最新的Chrome）

— dszakal

8

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

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

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

— 彼得·西布尔卡
source

3

您的链接已失效，您的解决方案对我不起作用！

— Mojtaba，

2

我认为，如果您这样做，那将行不通table-layout: fixed;。

— sr9yar

0

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

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

— 重做
source

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

— Thanhma San

-1

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

— 用户名
source

-1

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

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

OR

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

— 哈桑·塔雷克（Hassan Tareq）
source

-3

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

— AmirtharajCVijay
source

4

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

— Thanhma San 13'August 23