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
CSS Variables (Custom Properties) in Pseudo-Element "Content" Property
Scale HTML Table Before Printing Using CSS
CSS Font-Size Changes When Font-Family Falls Back
Css3 Radial Gradients with Rgba()
How to Draw Realistic Smooth Slit Shadow with Pure CSS3
CSS Transition Not Working for Percentage Height
Change Width of Select Tag in Twitter Bootstrap
Difference Between Float and Align Property in CSS
How to Float an Element Left with Full Height of the Wrapper
Font-Size:62.5% VS. Font-Size:10Px
Does Anyone Know How Pinterest.Com's Layout Works
Twitter Bootstrap - Same Heights on Fluid Columns
CSS Background Image Disappearing in Chrome
Tailwind CSS Classes Not Showing in Storybook Build