Menu
I have an HTML table whose cells contain divs with display:inline-block, containing text of varying sizes.
I need the text to align on the baseline, and I need the background colors of the divs to fill the height of the cells. For the largest font, the background color does fill the cell, but it doesn't for the smaller fonts:
Is this possible? Obvious solutions like div { height:100% } seem to be scuppered by the varying font sizes.
Here's the code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
table td {
vertical-align: baseline;
padding: 0;
}
td div {
display: inline-block;
}
</style>
</head>
<body>
<table>
<tr>
<td style="background-color:cyan">
<div style="background-color:pink;">Pink</div>
<div style="background-color:green;">Green</div>
</td>
<td style="background-color:cyan">
<div style='font-size: 40pt; background-color:yellow;'>
Big yellow text
</div>
</td>
</tr>
</table>
</body>
</html>
It's also on jsfiddle here.
820
Not perfect, but the closest I could get:
http://jsfiddle.net/gfPkV/14/
101
Quick and dirty fix:
CSS
div {
line-height:60px;
height:60px;
vertical-align:middle;
}
Demo: http://jsfiddle.net/2YbBg/
2
I read once, that td does not report it's height. So any height: 100% or height:auto, etc.. won't work.
So my solution is here: http://jsfiddle.net/UGTYP/
It changes height of "pink" text to the height of "yellow" div with javascript.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
