css - 在 TD 中放置内容而不影响动态表格布局。仅在可能的情况下使用 CSS

Question

我有一个我想保持动态的表格，这意味着我不想以像素或百分比为单位分配列宽。

在大多数情况下，表格在分配合理的列宽方面做得很好。问题是有时我需要用异常宽的数据加载一个或多个 TD。结果是整个表格布局被移动以处理超宽的 TD 内容。

我想以某种方式标记一个 TD 或其内容，使其恰好适合现有布局而不影响列宽。我确实希望 TD 高度受到影响。

基本上，我想强制将内容包裹在现有的 TD 中，而 TD 不会尝试通过调整列宽来容纳内容。

<table>
       <tr><td>Field Label #1</td><td><input name='@1'></td></tr>
       <tr><td>Field Label #2</td><td><input name='@2'></td></tr>
       <tr><td>Field Label #3</td><td><input name='@3'></td></tr>
       <tr><td>Field Label #4</td><td><input name='@4'></td></tr>
       <tr><td>&nbsp;</td><td class='ignoreContentWidth'><div>Super long message or notice to user that I want to wrap naturally but I don't want it to have any effect on the table layout..</div></td></tr>
       <tr><td>Field Label #5</td><td><input name='@5'></td></tr>
</table>​

我尝试了以下 CSS，这让我参与其中，但现在 TD 也忽略了内容高度。

.ignoreContentWidth
{
    /* display: none; */
    position:relative;
}

.ignoreContentWidth div
{
    position:absolute;
    top:0;
}

显示问题的 fiddle 。 Fiddle with CSS

删除 fiddle 中的 CSS 以查看我不想要的内容。

Answer 1

使用

.ignoreContentWidth
{
    width:1px;
}

似乎可以解决问题。

这有点 hacky，但是使该单元格的宽度尽可能小可以将其降低到空单元格时的宽度。文本换行并强制单元格高度根据需要更改。