Make a table fill the entire window

Question

How can I make a HTML table fill the entire browser window horizontally and vertically   The page is simply a title and a score which should fill the entire window    I realise the fixed font sizes are a separate issue     lt table style  width  100   height  100    gt       lt tr style  height  25   font-size  180px   gt           lt td gt Region lt  td gt       lt  tr gt       lt tr style  height  75   font-size  540px   gt           lt td gt 100 00  lt  td gt       lt  tr gt   lt  table gt    When I use the above code  the table width is correct  but the height shrinks to fit the two rows of text   I m likely to be forced to use Internet Explorer 8 or 9 to present this page

User · Answer

Try using   lt html style  height  100    gt       lt body style  height  100    gt           lt table style  height  100    gt                in order to force all parents of the table element to expand over the available vertical space  which will eliminate the need to use absolute positioning    Works in Firefox 28  IE 11 and Chromium 34  and hence probably Google Chrome as well   Source  http   www dailycoding com posts howtoset100tableheightinhtml aspx

User · Answer

That is because  of course  there is no ACTUAL page height  Keep in mind that you scroll throughout the contents of a page vertically not horizontally  creating a limited width but unlimited height  What the selected answer did was to make the table take up the visible area and stay there no matter what absolute positioning  So theoretically what you were trying to do was impossible

User · Answer

you can see the solution on http   jsfiddle net CBQCA 1   OR    lt table style  height 100  width 100   position  absolute  top  0  bottom  0  left  0  right  0 border 1px solid  gt        lt tr style  height  25    gt           lt td gt Region lt  td gt       lt  tr gt       lt tr style  height  75    gt           lt td gt 100 00  lt  td gt       lt  tr gt   lt  table gt     I removed the font size  to show that columns are expanded  I added border 1px solid just to make sure table is expanded  you can remove it

User · Answer

Below line helped me to fix the issue of scroll bar for a table  the issue was awkward 2 scroll bars in a page  Below style when applied to table worked fine for me   lt table Style  position  absolute   height  100   width  100     gt

User · Answer

You can use position like this to stretch an element across the parent container    lt table style  position  absolute  top  0  bottom  0  left  0  right  0   gt       lt tr style  height  25   font-size  180px   gt           lt td gt Region lt  td gt       lt  tr gt       lt tr style  height  75   font-size  540px   gt           lt td gt 100 00  lt  td gt       lt  tr gt   lt  table gt

User · Answer

This works fine for me    x000D   x000D   lt style type  text css  gt  x000D   table   x000D   position  absolute  x000D   top  0  x000D   bottom  0  x000D   left  0  x000D   right  0  x000D   height  100   x000D   width  100   x000D    x000D   lt  style gt  x000D   x000D   x000D    For me  just changing Height and Width to 100  doesn   t do it for me  and neither do setting left  right  top and bottom to 0  but using them both together will do the trick

[html] Make a table fill the entire window

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to stylesheet