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

javascript - THREE.js reposition vertices for RingGeometry -

javascript - I need to update the text of a paragraph by inline edit -

assembly - What is the addressing mode for ld, add, and rjmp instructions? -