Table-Layout: have one row get all space required (because of rowspan)

问题

I havea few complex data-table and am facing a problem with they layout: there is one cell wich gets a rowspan across all other rows, but the content of that cell is variable in height and may well exceed space required by all other rows.

something like this:

<table>
<tr><td style="height: 20px;">bla1</td><td rowspan="3">supa-col!</td></tr>
<tr><td style="height: 20px;">bla2</td></tr>
<tr><td style="height: 20px;">bla3</td></tr>
</table>

Now, lets look at that table again with a larger "supa-col":

<table>
<tr><td style="height: 20px;">bla1</td><td rowspan="3" style="height: 200px;">supa-col!</td></tr>
<tr><td style="height: 20px;">bla2</td></tr>
<tr><td style="height: 20px;">bla3</td></tr>
</table>

What happens when this is rendered is that the additional vspace required to include the rowspaning call gets distributed equally across the height of all cells.

What I would prefer is that space to be appended at the bottom of the last row, so that the distance between row 1 and 2 does not change. In other words: the size of that supa-col should not have an impact on the layout of all other calls... (I'd also be happy to append a final row which could get all the vetical filling that is needed...)

(Of course, in the real world, I do not know (or set) the heights in advance...)

回答1:

Just remove the height attribute from the last one...

 <tr><td>bla3</td></tr>

回答2:

You can use vertical-align on the td's. Css

td {
  vertical-align: top;
}

<table>
  <tr><td style="height: 20px;vertical-align:top;">bla1</td>
  <td rowspan="3" style="height: 200px;vertical-align:top;">supa-col!</td></tr>
  <tr><td style="height: 20px;vertical-align:top;">bla2</td></tr>
  <tr><td style="height: 20px;vertical-align:top;">bla3</td></tr>
</table>

来源：https://stackoverflow.com/questions/20128082/table-layout-have-one-row-get-all-space-required-because-of-rowspan

标签

html

css

html-table

tablelayout