Chrome Doesn't Honor Row Height If Rowspan Is Present

Chrome doesn't honor row height if rowspan is present

Found: the trick is to put another table inside a cell of the table with the non-rowspan content, remove the rowspan from the other cell and set the outer and inner table height to 100%. Horrible but effective.

HTML:

<table id="outer"><tbody><tr>
<td>
<table id="inner"><tbody>
<tr id="row-1">
<td>1st row</td>
</tr>
<tr id="row-2">
<td>2nd row</td>
</tr>
</tbody></table>
</td>
<td>
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</td>
</tr></tbody></table>

CSS:

#row-2 
{
height: 1px;
}
#outer, #inner
{
height:100%;
}

http://jsfiddle.net/xp7vz/3/

Div in table rowspan not using full height

Option 1

Simply add overflow:auto; to your div CSS

Demo Fiddle

td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}

Option 2

Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.

Option 3

The only other way would be to set position:relative on the td elements then position:absolute for the child div

Get two divs to fill up remaining height

I think you're looking for the rowspan attribute. This will let you make one td span multiple rows.

Try something like this:

<table>
<tr>
<td class="leftSide" rowspan="2">a</td>
<td class="rightSide">b</td>
</tr>
<tr>
<td class="rightSide">c</td>
</tr>
</table>

JSFiddle

Colspan/Rowspan for elements whose display is set to table-cell

As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout



Related Topics



Leave a reply



Submit