Question

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

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

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

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

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

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

Answer 1

你必须使用桌子吗？使用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

Answer 2

我想我理解它。如果你的单元格最初没有文本，那么该单元格没有高度，但是如果你向它添加文本，那么同一列中那个单元格下面的单元格会向下跳跃，为单元格中新添加的文本腾出空间（例如A1）。

如果您向空白单元格添加 （已编码的空格），则该单元格中的一行文本高度无需实际添加可见内容。

HTML：使用rowspan控制表中的单个行高

2 个答案: