Can The Text Inside A Td Resize Along With The Td? (be A Percentage Of Its Height?)

I have a table which is 100% of the screen, and inside it there are 3x3 = 9 cells, 33% each. So far so good. Its a clean, scalable tic-tac-toe thing. The problem is that the text

Solution 1:

As I've already provided you a demonstration in the comment, but I read that you wanted the font-size based on height of each td i.e 30% of td so there is no way you can do that using pure CSS, you will have to use Javascript or jQuery to achieve that...

$('table tr td').each(function() {
    $(this).css('font-size', $(this).height()*0.3 + 'px');
});

Demo

Solution 2:

This is possible with JavaScript.

<bodyonload="resizeFontSize();"onresize="resizeFontSize();"><divstyle="width: 100%"id="el">Content</div></body>

And the function:

functionresizeFontSize(){

element = document.getElementById('el');
element.style.fontSize = (element.offsetHeight * 0.3) + 'px'; 

}