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

Question

我的表有几列.

每列应具有动态宽度,该宽度取决于浏览器窗口大小.另一方面,每列不能太小.所以我试着设置min-width那些列,但它不是有效的属性.也试过min-width,<td>但这也是无效的财产.

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

Answer 1

小智 59

试试这个:

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

它不适用于`table-layout:fixed;` (29认同)
这是接受的答案,但是看下面的答案:http://stackoverflow.com/a/29379832/207552,看起来结果是未定义的. (3认同)
@Apostolos 为什么绝对宽度不可接受？这取决于用例。当然，您也可以使用适当的选择器和/或类名来代替内联样式。这只是一个最小的例子。该答案的问题在于，根据规范，它具有未定义的行为。 (2认同)
这很糟糕，因为 1) 它是**屏幕宽度相关**，2) 它适用于 **所有表格**，这可能不太好。(1) 使用百分比处理，(2) 使用类名处理。 (2认同)

Answer 2

min-width和max-width属性不像您期望的表格单元格那样工作.来自规格:

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

这在CSS3中没有改变.

实际上这已经在[CSS3 box model](http://www.w3.org/TR/css3-box/#min-max)中发生了变化,属性被应用于"所有元素但未替换的内联元素,表行和行组" (10认同)
td 上的最小宽度和最大宽度适用于 px，但不适用于 %（最新 Chrome） (4认同)

Answer 3

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

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

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