Html table resize height and td height

jones468 · November 10, 2010, 12:22pm

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.

Stevie_D · November 10, 2010, 12:33pm

Why do you need to change the height of the table? Why not just let it wrap around the contents?

Stomme_poes · November 10, 2010, 1:08pm

I’m trying to figure out what would be in the leftover space?

If each td is only 15px tall, and the tbody is 350px tall, where’s that extra space going to be? It has to be in the td’s.

Also, tfoot must come before tbody. Strange, but that’s the rule.

thead
then tfoot
then tbody(s)

Also I remember people making tables 100% back in the Bad Old Days… and actually height was never an allowed property of tables.

But, I would think that so long as you did the usual 100% height setup, that you could get the table to be 100% height of the viewport. Problem is the td’s will have to stretch to fill it.

html, body {
height: 100%;
}
table is direct child of body, so this would work on any non-table… I assume it would work on a table too:
table {
min-height: 100%;
}

html table {height: 100%;}

but, have never tested it.

PaulOB · November 10, 2010, 1:33pm

My thoughts exactly.

If the table is 100% high then all the table cells must also add up to 100%.

Maybe a diagram of what needs to be accomplished would be useful.

jones468 · November 10, 2010, 4:58pm

so the actual situation to resolve is this :
http://img716.imageshack.us/img716/8183/table1s.gif

I would want to obtain this situation :):
http://img829.imageshack.us/img829/1079/table2.gif

But with my code, I have this unwanted situation where also each table row has been stretched :sick::
http://img801.imageshack.us/img801/6316/table3.gif

PaulOB · November 10, 2010, 5:38pm

A few questions

What is #content_1? Is it part of the table still or is it something else like a footer? Is it a fixed height?

You have the table background as yellow but you can’t divorce the table cells from the table. To do what you wanted you could have one table cell stretching to 100% height and then place a nested table inside that table cell which will then just be a normal content height table.

I assume we are talking about tabular data here anyway otherwise a table is not the right approach and actually harder than a css version in most cases.

PaulOB · November 10, 2010, 6:10pm

Here is something that looks a bit like your drawing.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {/* for demo only */
    margin:0;
    padding:0;
}
html, body, #outer {
    height:100%;
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}
table#outer {
    margin:0 0 -150px;
}
#outer td {
    background:red;
    border:1px solid #000;
    padding-bottom:150px;
    vertical-align:top;
}
#inner {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
}
#footer {
    position:relative;
    height:150px;
    background:blue;
}
#inner td {
    background:green;
    padding:0;
}
</style>
</head>
<body>
<table id="outer">
    <tr>
        <td><table id="inner">
                <tr>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                </tr>
            </table></td>
    </tr>
</table>
<div id="footer">Footer</div>
</body>
</html>

jones468 · November 10, 2010, 6:28pm

What is #content_1? Is it part of the table still or is it something else like a footer? Is it a fixed height?

#Content_1 is something else present on the page for example a div .
About the footer imagine it always present at the bottom of the table.

I assume we are talking about tabular data here anyway otherwise a table is not the right approach and actually harder than a css version in most cases.

Yes of course. It is necessary the precence of a table.

Now I put a better images to describe my situation. Sorry for being so few comprehensible
The table has fixed header and fixed footer and it is scrollable.
I already have a scrolling table but i’m unable to fit dynamically the height to #content1.
i have omitted to say the details about the scrolling table and fixed header and footer because I thought they was useless to resolve the problem.

There are also labels columns in the header and in the footer that describe the content of the columns in the table.
So they would be always visible during scrolling.

This is the starting point:
http://img19.imageshack.us/img19/879/table1scrolling.gif

This is the ideal situation I want to reach:
http://img255.imageshack.us/img255/2696/table2scrolling.gif

This is the bad and unwanted situation that occurs:
http://img440.imageshack.us/img440/4865/table3scrolling.gif

PaulOB · November 10, 2010, 6:37pm

If the table header and table footer are part of the same table then I don’t think you can do it. If the table header and footer can be separated from the table then you could do it as in my example above.

Perhaps if you posted your code for your scrolling table so we could see what you have got working so far then it might help in coming to a solution. Scrolling table content is very awkward at the best of times.

system · November 10, 2010, 6:46pm

You want a margin bottom for the table or the last row that should behave like a padding also. That’s not natural to tables.

You can sell your way into it, if you know the margin. Something like this perhaps?

   <!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;
      }
      
      table tr.last {
        display: block;
        margin-bottom:100px;
      }
   </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>
            <tr class="last">
            </tr>
         </tbody>

         <tfoot>
            <tr>
               <td>foot 1</td>
               <td>foot 2</td>
            </tr>
         </tfoot>
      </table>
      <script>
         resize_tbody();
      </script>
   </body>
</html>

jones468 · November 10, 2010, 6:50pm

this is the code of the scrolling table I have used:

<!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">
   <link rel="shortcut icon" href="include/favicon.ico">
   <title></title>
   <style>
      div.scrollWrapper{
        float:left;
        overflow:visible !important;
        overflow:scroll;
        height:150px;
      }
      table.scrollable{
        width:450px;
        margin-right:0 !important;
        margin-right:16px;
        border-collapse:separate;
      }
      table.scrollable th{
        border-top:1px solid #999999;
        border-left:1px solid #999999;
      border-bottom:1px solid #999999;
        padding:5px;
        background:#f7f7f7;
        position: relative;
      }
      table.scrollable tbody{
        height:150px;
        overflow:auto;
      }
      table.scrollable tr{
        height:0px;
      }
      table.scrollable td{
        border-left:1px solid #999999;
        border-bottom:1px solid #999999;
        text-align:center;
      }
   </style>
   </head>
   <body>
   <div class="scrollWrapper">
      <table class="scrollable">
         <thead>
             <tr>
                <th>Numbers</th>
                <th>Letters</th>
                <th>Symbols</th>
             </tr>
         </thead>
         <tfoot>
             <tr>
                <th>total numbers</th>
                <th>total letters</th>
                <th>total symbols</th>
             </tr>
         </tfoot>
         <tbody>
             <tr>
                <td>111</td>
                <td>aaa</td>
                <td>@@@</td>
             </tr>
             <tr>
                <td>222</td>
                <td>bbb</td>
                <td>###</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
             <tr>
                <td>999</td>
                <td>iii</td>
                <td>???</td>
             </tr>
         </tbody>
      </table>
      </div>
   </body>
</html>

I have taken this code from this site years ago:
http://www.agavegroup.com/?p=31
It’s very useful also with width 100%. but I have not been able to fit the height of the table to the page, or till the top of something else div below this table.

PaulOB · November 10, 2010, 9:35pm

And in which browser does that work?

The only browser that comes close is Firefox but all others are broken badly.

I was quite surprised when you said you had a table with scrolling header and footer because the only ones that I’ve seen that work without javascript are the ones that I’ve done (and used in an old css quiz)

I’ve had a play around and I think this is really a step too far but I got quite close with this which seems to work in IE6 - 8 and other browsers although is very convoluted and hacky.

http://www.pmob.co.uk/temp/scroll-table-fixed-headfoot-100.htm

You may be able to make something with it.

I used a blank last tablerow which I set to 100% height so that it pushed all the other cells out of the way and stopped them stretching.

The fixed header and footer are created with absolute p elements removed from the thead and tfoot. They can’t really be changed or positioned any better though.

jones468 · November 10, 2010, 11:54pm

Wow!! Wonderful It’s great! Many thanks!!!

The only browser that comes close is Firefox but all others are broken badly.

Yeah I’ve used it only with Firefox.

You may be able to make something with it.

Yes for sure!

I used a blank last tablerow which I set to 100% height so that it pushed all the other cells out of the way and stopped them stretching.

The fixed header and footer are created with absolute p elements removed from the thead and tfoot. They can’t really be changed or positioned any better though.

Ok I have seen that. I will change the width of some columns. I think that there will not be any problem doing that.