我有一个
HTML表格,其单元格包含带显示的div：inline-block,包含不同大小的文本.
我需要文本在基线上对齐,我需要div的背景颜色来填充单元格的高度.对于最大的字体,背景颜色确实填充单元格,但它不适用于较小的字体：
这可能吗？像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 here上.
解决方法
不完美,但我能得到的最接近：
