3

假设我有一个 2 行 2 列的表。然后我合并第二列中的行，并用几行文本填充这一列。

|------|------|
|      | text |
|------| text |
|      | text |
|------|------|

我的浏览器（IE 8，标准模式）自动将第一列中的行调整为相等的高度。向第二列添加行会增加第一列中行的大小。现在，当文本添加到第一列中的一个行时，IE 会扩展该行以包含文本并将剩余高度分配到另一行。

问题是当文本添加到第二列时，我希望第一列行中的文本不移动。（控件使用 javascript 动态显示或隐藏，导致每次调整左列的大小）。我还希望第一列中的文本位于其单元格的顶部，并调整左上角单元格的大小，以便单元格 1 和 2 中的文本之间没有多余的空间。

|---------|--------|
|text     |text    |
|---------|        |
|text     |text    |
|         |text    |
|         |        |
|---------|--------|

将 vertical-align:top 放在左上角的单元格上会将文本定位在该单元格中我想要的位置，但下面单元格中的文本仍然出现在页面下方太远，因为这些单元格的实际大小由控制渲染器。尝试设置单元格的高度 - style="height:100px;" 似乎也不起作用。我不想手动指定高度 - 我只想让 IE 最小化左上角单元格的高度，这样就没有多余的空间，并且在将文本添加到第二列时文本不会移动。

4

2 回答 2

2

一定要用桌子吗？使用 CSS 可能更容易实现这样的效果：

HTML：

<div class="row">
    <div class="col1">
        Row 1 Title                    
    </div>
    <div class="col2">
        Row 1 text<br />
        more text<br />
        even more text
    </div>
</div>
<div class="row">
    <div class="col1">
        Row 2 Title
    </div>
    <div class="col2">
        Row 2 text<br />
        more text<br />
        even more text<br />
        still more text
    </div>
</div>
<div class="row">
    <div class="col1">
        Row 3 Title
    </div>
    <div class="col2">
        Row 3 text<br />
        more text<br />
        even more text<br />
        still more text<br />
        yet another line of text
    </div>
</div>

​ CSS：

.row {
    margin-bottom: 10px;            
    overflow: hidden;
}
.col1, .col2 {
    float: left;
}
.col1 {
    margin-right: 10px;
}

JSFiddle

于 2012-09-10T14:48:51.413 回答
1

我想我明白了。如果您的单元格最初没有文本，则该单元格没有高度，但是如果您随后向其中添加文本，则同一列中该单元格下方的单元格会跳下以为单元格中新添加的文本腾出空间（例如 A1）。

如果您&nbsp;在空白单元格中添加（编码空间），您将在该单元格中获得一行文本的高度，而无需实际添加可见内容。

于 2012-09-10T15:26:44.853 回答