Make the background-color of a <div> fill the enclosing <td>
Question
I have an HTML table whose cells contain div s 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 div s 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 .
3 answers
solution1
2 2011-12-01 19:37:44
Quick and dirty fix:
CSS
div {
line-height:60px;
height:60px;
vertical-align:middle;
}
solution2
1 2011-12-01 17:05:08
Not perfect, but the closest I could get:
solution3
0 2011-12-01 17:48:34
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.