Html Table Resize Height And Td Height - HTML & CSS - SitePoint

Trang chủ » Html Table Row Height Stretch » Html Table Resize Height And Td Height - HTML & CSS - SitePoint

Có thể bạn quan tâm

Hi,

I have a html table and I am unable to change his height value to fit the browser window height though it was set to height: 100% in CSS;

so to change the size dynamically I have done something with javascript

  • change the height of tbody, but doing this the height of each td has been stretched;
  • I adjust the td height of each row within tbody;

So I want to obtain a higher tbody and td with normal height (15px), but there is something wrong in the code.

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title></title> <style type="text/css"> table tr td{ border: 1px solid red; } table tbody { background: #CCC; } </style> <script> function resize_tbody() { if (document.getElementById("my_table_tbody")) { document.getElementById("my_table_tbody").style.height = "350px"; var num_rows_tbody = document.getElementById("my_table_tbody").rows.length; for (a = 0; a <= num_rows_tbody - 1; a++) { document.getElementById("my_table_tbody").getElementsByTagName("td")[a].style.height = "15px"; } } } </script> </head> <body> <table> <caption>TABLE</caption> <thead> <tr> <th>col_1</th> <th>Col_2</th> </tr> </thead> <tbody id='my_table_tbody'> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> <tr> <td>3.1</td> <td>3.2</td> </tr> </tbody> <tfoot> <tr> <td>foot 1</td> <td>foot 2</td> </tr> </tfoot> </table> <script> resize_tbody(); </script> </body> </html>

I hope I have explained well enough this issue. Can you help me please? Many thanks.

Từ khóa » Html Table Row Height Stretch