1

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

在大多数情况下，该表在分配合理的列宽方面做得很好。问题是有时我需要加载一个或多个包含异常宽数据的 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;
}

一个显示问题的小提琴。 摆弄 CSS

删除小提琴中的 CSS 以查看我不想要的内容。

4

2 回答 2

1

使用

.ignoreContentWidth
{
    width:1px;
}

似乎可以解决问题。

这有点笨拙，但是使该单元格的宽度尽可能小会将其缩小到它为空时的宽度。文本换行并强制单元格高度根据需要更改。

于 2012-08-16T16:11:38.523 回答
0

如果你想要这样，你至少需要在桌子上的某个地方有一个宽度。

您可以使用CSS width或max-width. 此外，如果您希望相应地调整高度，请删除绝对定位。试试这个：

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

}

.ignoreContentWidth div
{
max-width: 300px;
}

祝你好运！

编辑：这是给你的 JS Fiddle：http: //jsfiddle.net/MCHdb/

于 2012-08-16T16:08:50.277 回答