html - "overflow: hidden;" for percentage sized table cells -



html - "overflow: hidden;" for percentage sized table cells -

i want table filling whole window, 2 rows each filling half of height of table(as window), , keeping layout while window beingness resized. can when contents don't overflow, when contents in 1st row desires height larger calculated height percentage, row doesn't maintain percentage more, instead, stays desired height , pushes 2nd row out of window. tried "overflow: hidden;" rows, that's not way works. how can then?

<!doctype html> <html> <head> <style> html,body{height:100%;} table{height:100%;} table>tbody>tr{height:50%;overflow:hidden;} </style> </head> <body> <table> <tr> <td>abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br /></td> </tr> <tr> <td>def</td> </tr> </table> </body> </html>

update css below.

html,body{height:100%; padding:0; margin:0;} table{height:100%;} table td{height:100%; overflow:auto; display:block; border:1px solid #ff00ff;}

demo

html css

Comments

Popular posts from this blog

php - Edges appear in image after resizing -

ios8 - iOS custom keyboard - preserve state between appearances -

Delphi change the assembly code of a running process -