HTML：用行跨行控制表中的單個行高

假設我有一個2行2列的表。然後我合併第二列中的行，並用幾行文本填充此列。HTML：用行跨行控制表中的單個行高

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

我的瀏覽器（IE 8，標準模式）會自動將第一列中的行大小設置爲相等高度。將行添加到第二列會增加第一行中的行的大小。現在，當文本被添加到第一列中的一行時，IE擴展該行以包含文本並將剩餘高度分發到另一行。

問題是我想在第一列的行的文本時，文本添加到第二列不動。（控件使用javascript動態顯示或隱藏，導致左列每次調整大小）。我也想在第一列中的文本坐在其電池的頂部，並有左上角的單元格的大小，從而有文本之間的細胞1和2

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

沒有多餘的空間，把垂直對齊：位於左上角的單元格頂部會將文本放置在所需的單元格中，但下面單元格中的文本仍然顯示在頁面的下方，因爲這些單元格的實際大小由渲染器控制。嘗試設置單元格的高度 - style =「height：100px;」似乎也不起作用。我不希望手動指定高度 - 我只是希望IE最小化左上角單元格的高度，以便沒有多餘的空間，並且文本添加到第二列時文本不會移動。

來源

2012-09-10 Trent

您是否需要使用表格？大概可以用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-10 14:48:51 daGUY

我會繼續在我的未來發展工作。表是一個真正的痛苦 – Trent

我想我理解它。如果您最初沒有文字的單元格，則該單元格沒有高度，但是如果您向其添加文本，則同一列下方的單元格會跳下來爲單元格中新添加的文本留出空間（例如A1）。

如果您將一個 （編碼空間）添加到空白單元格中，那麼您將在該單元格中具有一行文本的高度，而不必實際添加可見內容。

來源

2012-09-10 15:26:44 Scrimothy

HTML：用行跨行控制表中的單個行高

回答

相關問題