in CSS, how can I make a table expand to fill a container div? -

I want to "create" spaces on the screen by creating several container DIVs, then fill the contents in each DIVs. In one case, I would have to fill with a table. In the interior of the table there are JPEGs, I do not want to use fixed pixel size anywhere, so that the content can shrink well in different size browsers.

After repeated tests and errors, and reading something on the Internet, I came to know that the whole chain container-DP ---> Tables-> TDI-> TR-> TD-> Img well in size I have to make sure that each of these elements has the following qualities: "height: 100%; width: 100; condition: relative" (IMG status can be completed by itself).

It works fine with only 1 row table, but if I have many lines, then it seems that the height of the line is calculated positively from your parents, which Someone, because if I have 2 rows, then each row is still as high as T but I manually divide the height of TR by 2, but it is not exactly fit in the container.

So how can I shrink the table automatically in the surrounding container?

Thanks

  & lt; Style type = "text / css" & gt; Div {boundary: 2px solid red; # Down-banner {height: 40%; } #Bank-Banner Tony {Status: Relative; Height: 100%; Width: 100%; } #device-banner tr {max-height: 100%; Width: 100%; Status: Relative; Height: 100%; } & Lt; Style type = "text / css" & gt; Div {boundary: 2px solid red; # Down-banner {height: 40%; } #Bank-Banner Tony {Status: Relative; Height: 100%; Width: 100%; } #device-banner tr {max-height: 100%; Width: 100%; Status: Relative; Height: 100%; } # Down-Banner Table {Status: Relative; Height: 100%; Width: 100%; } # Down-banner div {status: relative; Height: 100%; Width: 100%; } #Bank-banner IMG {height: 100%; Status: Completed; Correct: 0; Left: 0; Margins: Auto; Top: 0; Bottom: 0; Width: Auto; } & Lt; / Style & gt; & Lt; Div id = "bottom-banner" & gt; & Lt; Table & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; Td> & Lt; Div & gt; & Lt; Img src = "11a2.jpg" /> & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> & Lt; Div & gt; & Lt; Img src = "11a2.jpg" /> & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Div & gt;  

Just set the width and height of your desk to 100% but the parent unit of the table Should have a fixed height, if the cells are empty, then they will take any vertical position without any height.

  div {width: 100%; Height: 500px; Border: 5 ppl yellow solid; } Table {width: 100%; Height: 100%; Border: 3px red double; }  

  & lt; Div & gt; & Lt; Table & gt; & Lt; TR & gt; & Lt; Td bgcolor = "# 2062f" & gt; & Lt; / Td> & Lt; Td bgcolor = "# 05BDB0" & gt; & Lt; / Td> & Lt; Td bgcolor = "#ffcc 2" & gt; & Lt; / Td> & Lt; Td bgcolor = "# FAA72A" & gt; & Lt; / Td> & Lt; Td bgcolor = "# CD3450" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;