css - 将td的宽度设置为auto？

Question

我有td一个内联样式的 aa，将其设置width为百分比。我可以修改css，但不能修改html。

如何使td唯一占用其内容所需的宽度？

以下 CSS 不起作用：

td#my 
{
    width: auto !important;
}

Answer 1

您需要遵守 CSS 特定性规则。（这样做可以避免使用！important）

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

内联样式的权重为 1000，其中 ID 为 100，元素为 1。因此，为了确保正确使用您的 CSS 规则，您需要密切注意这一点。上面链接的文章在解释特异性方面做得比我希望达到的要好得多。读它，研究它，爱它。

这并不能直接回答您的问题：这是一篇内容丰富的文章，实际上可以通过允许您采取不同的路线来解决您的问题。

Answer 2

默认情况下，表格单元格是自动宽度的，但它们占用了其列中最宽单元格的最小宽度。所以以这个为例

td1|td2|td3|

1  |2  |3  |

基于第一行，这些单元格的宽度都将相同。我没有办法强迫它这样做：

td1|td2|td3|

1|2|3|

这听起来像是您正在尝试做的事情，而不是在不更改 HTML 的情况下。

Answer 3

您可能还必须对表格其他单元格的 css 进行一些更改。深入研究以下内容，了解如何计算单元格宽度

来自： w3.org/TR/CSS21/tables.html#width-layout

列宽确定如下：

1. 计算每个单元格的最小内容宽度（MCW）：格式化的内容可以跨越任意数量的行，但不能溢出单元格框。如果单元格的指定“宽度”(W) 大于 MCW，则 W 是最小单元格宽度。'auto' 值意味着 MCW 是最小单元格宽度。块引用

   此外，计算每个单元格的“最大”单元格宽度：格式化内容而不换行，除非出现明确的换行符。

2. 对于每一列，从仅跨越该列的单元格中确定最大和最小列宽。最小值是具有最大最小单元格宽度（或列“宽度”，以较大者为准）的单元格所需的最小值。最大值是具有最大单元格宽度（或列“宽度”，以较大者为准）的单元格所需的最大值。

3. 对于跨越多于一列的每个单元格，增加它跨越的列的最小宽度，以便它们加在一起至少与单元格一样宽。对最大宽度执行相同操作。如果可能，将所有跨越的列加宽大致相同的量。

4. 对于具有除“auto”之外的“width”的每个列组元素，增加它跨越的列的最小宽度，以便它们加在一起至少与列组的“width”一样宽。

这给出了每列的最大和最小宽度。

Answer 4

尝试：

td#my {width:inherit !important;}

或者

td#my {width:0% !important;}