Best IT Recipes

Make the background color <div> fill in the attached <td>

I have an HTML table whose cells contain a div with display:inline-block containing text of different sizes.

I need text for baseline alignment, and I need div background colors to fill the height of the cells. For the largest font, the background color fills the cell, but not for smaller fonts:

How it looks in firefox

Is it possible? Obvious solutions, such as div { height:100% } , seem to be too different font sizes.

Here is the code:

 <!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 is also located in jsfiddle here .

+8
html css alignment html-table
Dec 01 2018-11-12T00:
source share
3 answers

Quick and dirty fix:

CSS

 div { line-height:60px; height:60px; vertical-align:middle; }

Demo: http://jsfiddle.net/2YbBg/

+1
Dec 01 '11 at 19:37
source share

Not perfect, but the closest I could get:

http://jsfiddle.net/gfPkV/14/

0
Dec 01 '11 at 17:05
source share

I read once that td does not report this height. Therefore, any height: 100% or height:auto , etc. Will not work.

So my solution is here: http://jsfiddle.net/UGTYP/

It changes the height of the pink text to the height of the yellow div with javascript.

0
Dec 01 '11 at 17:48
source share


More articles:


All Articles