Line-height does not seem to work inside a table cell - html

Question

I have been unable to get a table to format fonts like the one in the image. What I did was to set the line-height for numbers to 33% but thus far the line height has always been a full line height and I would not be able to get the below layout using either table tag or div/span tags. Any help is greatly appreciated.

Answer 1

You an change the font size and borders accordingly, but the following layout should work
<div style="display:inline-block;font-size:400%">A</div>
<div style="display:inline-block">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 2

http://jsfiddle.net/vmedg/
There's different ways to achieve the look of that pic. I'll provide you with an example to get started.
I prefer using position: absolute since it's much easier to arrange N boxes in 1 container. Sometimes, it might be pretty impossible without using it. position: absolute fixes the element div to the parent element .container.
So by setting the .letter to top: 0 and left: 0 , it positions it starting at the top left. But you want the letter to expand the whole container like in your pic. So to do that we can simply add bottom: 0 to force it to stretch the whole way.
HTML:
<div class="container">
<div class="letter">A</div>
<div class="number one">1</div>
<div class="number two">2</div>
<div class="number three">3</div>
</div>
CSS:
.container {
position: relative;
width: 300px;
height: 300px;
background: silver; //remove this to make it white like in your pic
}
.letter {
position: absolute;
left: 0;
top: 0;
width: 80%;
bottom: 0;
display: inline-block;
border: 1px solid black;
font-size: 248px;
text-indent: 30px;
}
.number {
position: absolute;
right: 0;
width: 19%;
height: 33%;
border: 1px solid black;
font-size: 60px;
text-indent: 15px;
}
.one {
top: 0;
}
.two {
top: 33%;
}
.three {
top: 66%;
}