controlling row height with a variable number of rows

woodsonoversoul · March 21, 2009

Hello all. I'm trying to achieve a fixed row height in a table that will have a variable number of rows. I have a table with a fixed header and footer which scrolls as it's <tbody> becomes too large. I can't seem to stop my browser from auto sizing the rows, any suggestions. Code is below*:

<!-- This comment keeps IE6/7 in the reliable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>playlit template</title>

<meta name="keywords" content="fixed table header; non-scroll header; fixed footer; freeze header; CSS tips; print repeating headers; print repeating footers">

<link rel="stylesheet" href="basic.css" type="text/css">

<style type="text/css">
div.tableContainer {
width: 600px;		/* table width will be 99% of this*/
height: 295px; 	/* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}

table {
width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #f7f7f7;
}

table>tbody	{  /* child selector syntax which IE6 and older do not support*/
overflow: auto; 
height: 250px;
overflow-x: hidden;
}

tbody tr {
  height: 8px;
  }
  
tbody td {
  line-height: 0px;
  }


thead tr	{
position:relative; 
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}

thead td, thead th {
text-align: center;
font-size: 14px; 
background-color: #d8d8d8;
color: blue;
font-weight: bold;
border-top: solid 1px #d8d8d8;
}	

td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: left;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}

td.empty {
  border-bottom: none;
  }
  
tr.trtest {
  /*height: 60%;*/
  }


table tfoot tr { /*idea of Renato Cherullo to help IE*/
      position: relative; 
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >= 
  offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }


tfoot td	{
text-align: center;
font-size: 11px;
font-weight: bold;
background-color: green;
color: yellow;
border-top: solid 1px slategray;
}

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

#song_name_col {
  width: 150px;
  }
  
#song_artist_col {
  width: 120px;
  }
  
#song_date_col {
  width: 80px;
  
  }
  
#song_location_col {
  width: 120px;
  }
  
#song_extras_col {
  width: 75px;
  }
  
h3 {
  display: inline;
  font-size: 6pt;
  }

</style>



<!-- print style sheet -->
<style type="text/css" media="print">
div.tableContainer {overflow: visible;	}
table>tbody	{overflow: visible; }
td {height: 14pt;} /*adds control for test purposes*/
thead td	{font-size: 11pt;	}
tfoot td	{
text-align: center;
font-size: 9pt;
border-bottom: solid 1px slategray;
}

thead	{display: table-header-group;	}
tfoot	{display: table-footer-group;	}
thead th, thead td	{position: static; } 

thead tr	{position: static; } /*prevent problem if print after scrolling table*/ 
table tfoot tr {     position: static;    }


</style>

</head>

<body>

<div id="container">

<h2>Scrollable Table with Fixed Header</h2>
<h3>Non-Scrolling Header and Footer; Printing Repeated Headers and Footers</h3>


<div class="tableContainer">
  <table cellspacing="0">
     <thead>
      <tr> 
        <td id='song_name_col'>Song name</td>
        <td id='song_artist_col'>Artist</td>

        <td id='song_date_col'>Date</td>
        <td id='song_location_col'>Location</td>
        <td id='song_extras'>Extras</td>
      </tr>
    </thead>
    <tfoot>
      <tr> 
        <td colspan="5">### songs, ## hours ## min ## sec</td>
      </tr>

    </tfoot>
    <tbody>
      <tr id='0000gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0001gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0002gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0000gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0001gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0002gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0000gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0001gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0002gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0000gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      <tr id='0001gd1987-01-01ses1' class='li-even'><td class='song_name'>Not Fade Away<h3> (00:00)</h3></td><td class='song_artist'>Grateful Dead</td><td class='song_date'>1987-01-01</td><td class='song_location'>Jones Beach, VA</td></td><td class='song_extras'></td></tr>
      
            
      
      <tr class='trtest'><td class='tdtest'> </td></tr>
      
      

    </tbody>
  </table>

</div>


</div> <!-- end container -->
</body>
</html>

*some code is taken from various tutorials and examples I've found. I'm still new to css and this is all just a learning exercise

Loathor__Healer · March 21, 2009

okay, when I copy pasted this to my own File and displayed it in my Browser. The Rows were too small half the words were cut off.

Is that the auto Resizing you were talking about?

All I did was Change this..

tbody td {
  line-height: 0px;
  }

to this:

tbody td {
  line-height: 8px;
  }

Hope that helps.

Sign In

controlling row height with a variable number of rows

Recommended Posts

woodsonoversoul

Link to comment

Share on other sites

Loathor__Healer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information