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');
});
Solution 2:
This is possible with JavaScript.
<body onload="resizeFontSize();" onresize="resizeFontSize();">
<div style="width: 100%" id="el">Content</div>
</body>
And the function:
function resizeFontSize(){
element = document.getElementById('el');
element.style.fontSize = (element.offsetHeight * 0.3) + 'px';
}
Post a Comment for "Can The Text Inside A Td Resize Along With The Td? (be A Percentage Of Its Height?)"