我有一个
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上.
解决方法
不完美,但我能得到的最接近：
