使<div>的背景颜色填充封闭的<td>
Ric*_*dle 9 html css html-table alignment
我有一个HTML表格,其单元格包含divs display:inline-block,包含不同大小的文本.
我需要文本在基线上对齐,我需要divs 的背景颜色来填充单元格的高度.对于最大的字体,背景颜色确实填充单元格,但它不适用于较小的字体:
这可能吗？很明显的解决方案div { height:100% }似乎被不同的字体大小所打破.
这是迄今为止的代码:
<!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>
它也在这里的 jsfiddle .