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
Post a Comment