Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Why is it that the percentages in a scrolling table tbody do not seem to work properly? What am I missing here?

Posted on 2015-01-10
11
148 Views
Last Modified: 2015-01-11
Note: Also a question here would be why doesn't the tfoot tag working as expected as well(Supposed to be placed just after /thead tag )  Instead I had to place it after /tbody tag.

This is using HTML5 standard. I am surprised I have problems with td cell spacing with percentages as well
Note when I specify 80px instead of 20% it works. Why?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>test scrolling Table with no JS needed</title>
</head>

<body>
<table style="border:1;width:350px;background-color:cyan;display:block">
<thead style="width:400px;background-color:brown;">
<tr>
	<td id="number" style="width:20%">Number</th>
	<td id="name"   style="width:80%">Name</th>
</tr>
</thead>
<tbody style="border:2;width:350px;height:105px;display:block;overflow-y:scroll;overflow-x:hidden;" >
<tr>
<td style="width:40%">0001</td>
<td style="width:80%">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number" >0002</td>
<td style="width:80%" headers="name" >Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0003</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0004</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0005</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0006</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0007</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0008</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0009</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0010</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0011</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0012</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0013</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0014</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0015</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0016</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0001</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0002</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0003</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0004</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0005</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0006</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0007</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0008</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0009</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0010</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0011</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0012</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0013</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0014</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0015</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0016</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0001</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0002</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0003</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0004</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0005</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0006</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0007</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0008</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0009</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0010</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0011</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0012</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0013</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0014</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0015</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0016</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
</tbody>
<tfoot style="width:350px;background-color:black;color:yellow;">
<tr>
	<td style="width:20%;">Number</th>
	<td style="width:80%;">Name</th>
</tr>
</tfoot>

</table>
</body>
</html>

Open in new window

0
Comment
Question by:Robert Silver
  • 6
  • 5
11 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40542506
Your table code is riddled with errors (W3C reports 98 of them).  For example:

      <td id="number" style="width:20%">Number</th>
      <td id="name"   style="width:80%">Name</th>

td is not closed with a th

So what I think is happening is the browsers are going to quirks mode and rendering as best they can.  This can play hell with all sorts of things on render.
0
 
LVL 2

Author Comment

by:Robert Silver
ID: 40542546
FIRST:
I resolved those mistakes that came out when experimenting. th vs td tags sees to do little different other than accessibility issues. I tried it both ways of course td and th

I fixed them and also removed the border style which I changed to border-width:1px  from border:
 
Still here is the resultant HTML and now it validates perfectly but I still need to specify width:40% or width:80px to make the tbody cells space properly in the scroll. This does not appear to be how it should behave. I would expect that width:20% would be equivalent to width:80px not width:40%
Now if I place the tfoot section just below the /thead tag the cell formats for thead and tfoot are identical but if I I place the tfoot section after the /tbody tag the percentages on the TD width styles do not display properly
Here is my resultant HTML5 page sample:
Note the width:20%  styles on all the preceding TD tags in the tbody section appear to be overridden by the width:40%
You can see for yourself:  Same problem exists TD cell widths do not come out as expected. Again Why?? now that it is HTML validated

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>test scrolling Table with no JS needed</title>
</head>

<body>
<table style="border-width:0px;width:400px;background-color:cyan;display:block">
<thead style="width:400px;background-color:grey;">
<tr>
	<th id="number" style="width:20%">Number</th>
	<th id="name"   style="width:80%">Name</th>
</tr>
</thead>


<tbody style="border-width:1px;width:400px;height:105px;display:block;overflow-y:scroll;overflow-x:hidden;" >
<tr>
<td style="width:20%">0001</td>
<td style="width:80%">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0002</td>
<td style="width:80%" headers="name" >Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0003</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0004</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0005</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0006</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0007</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0008</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0009</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0010</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0011</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0012</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0013</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0014</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0015</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0016</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0001</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0002</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0003</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0004</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0005</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0006</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0007</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0008</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0009</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0010</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0011</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0012</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0013</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0014</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0015</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0016</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0001</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0002</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0003</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0004</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0005</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0006</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0007</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0008</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
<tr>
<td style="width:20%" headers="number">0009</td>
<td style="width:80%" headers="name">Joe Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0010</td>
<td style="width:80%" headers="name">Sally Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0011</td>
<td style="width:80%" headers="name">Jack Money</td>
</tr>
<tr>
<td style="width:20%" headers="number">0012</td>
<td style="width:80%" headers="name">Jackie Fields</td>
</tr>
<tr>
<td style="width:20%" headers="number">0013</td>
<td style="width:80%" headers="name">Gary Seven</td>
</tr>
<tr>
<td style="width:20%" headers="number">0014</td>
<td style="width:80%" headers="name">James Kirk</td>
</tr>
<tr>
<td style="width:20%" headers="number">0015</td>
<td style="width:80%" headers="name">Brian Shoe</td>
</tr>
<tr>
<td style="width:20%" headers="number">0016</td>
<td style="width:80%" headers="name">Kat Devlin</td>
</tr>
</tbody>
<tfoot style="width:400px;background-color:black;color:yellow;">
<tr>
	<td style="width:20%">Number</td>
	<td style="width:80%">Name</td>
</tr>
</tfoot>
</table>
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:Robert Silver
ID: 40542551
This may be cleanertablescrolltest.html
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40542595
The issue appears to be with the display:block in the styles.  Stand by while I clean the code and will repost a working version
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40542613
Okay, this seems to be working:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>test scrolling Table with no JS needed</title>
<style>
	 table.tableAll {
        display: table;
        width: 400px;
        background-color: cyan;
    }
 
    table.tableAll thead, table.tableAll tfoot {
        float: left;
        width: 100%;
        font-weight:bold;
        background-color: gray;
    }

    table.tableAll tbody {
    	float: left;
    	width:	100%;
        overflow: auto;
        height: 150px;
    }
 
    table.tableAll tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    table.tableAll th, table.tableAll td {
        width: 20%;
    }
    table.tableAll tr>td:last-child {
        width: 78%;
    }
</style>
</head>

<body>
<table class="tableAll">	
    <thead>
        <tr>
            <td>Number</td>
            <td>Name</td>
        </tr>
    </thead>
</thead>
<tbody>
<tr>
<td headers="number">0001</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0002</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0003</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0004</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0005</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0006</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0007</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0008</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0009</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0010</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0011</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0012</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0013</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0014</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0015</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0016</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0001</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0002</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0003</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0004</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0005</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0006</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0007</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0008</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0009</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0010</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0011</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0012</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0013</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0014</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0015</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0016</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0001</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0002</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0003</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0004</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0005</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0006</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0007</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0008</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0009</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0010</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0011</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0012</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0013</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0014</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0015</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0016</td>
<td headers="name">Kat Devlin</td>
</tr>
<tfoot>
<tr>
	<td>Number</td>
	<td>Name</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>

Open in new window


You may need to test it for backwards compatibility as removing the display:block may not work well on the older stuff.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 40542625
And a little more experimentation gets us to where it does work with display: block:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>test scrolling Table with no JS needed</title>
<style>

	tbody, thead tr, tfoot tr { display: block; }

	table.tableAll {
        display: table;
        width: 400px;
        background-color: cyan;
    }
 
    table.tableAll thead, table.tableAll tfoot {
        float: left;
        width: 100%;
        font-weight:bold;
        background-color: gray;
    }

    table.tableAll tbody {
    	float: left;
    	width:	100%;
        overflow: auto;
        height: 150px;
    }
 
    table.tableAll tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    table.tableAll th, table.tableAll td {
        width: 20%;
    }
    table.tableAll tr>td:last-child {
        width: 78%;
    }
</style>
</head>

<body>
<table class="tableAll">	
    <thead>
        <tr>
            <td>Number</td>
            <td>Name</td>
        </tr>
    </thead>
</thead>
<tbody>
<tr>
<td headers="number">0001</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0002</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0003</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0004</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0005</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0006</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0007</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0008</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0009</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0010</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0011</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0012</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0013</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0014</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0015</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0016</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0001</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0002</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0003</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0004</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0005</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0006</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0007</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0008</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0009</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0010</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0011</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0012</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0013</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0014</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0015</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0016</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0001</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0002</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0003</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0004</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0005</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0006</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0007</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0008</td>
<td headers="name">Kat Devlin</td>
</tr>
<tr>
<td headers="number">0009</td>
<td headers="name">Joe Money</td>
</tr>
<tr>
<td headers="number">0010</td>
<td headers="name">Sally Fields</td>
</tr>
<tr>
<td headers="number">0011</td>
<td headers="name">Jack Money</td>
</tr>
<tr>
<td headers="number">0012</td>
<td headers="name">Jackie Fields</td>
</tr>
<tr>
<td headers="number">0013</td>
<td headers="name">Gary Seven</td>
</tr>
<tr>
<td headers="number">0014</td>
<td headers="name">James Kirk</td>
</tr>
<tr>
<td headers="number">0015</td>
<td headers="name">Brian Shoe</td>
</tr>
<tr>
<td headers="number">0016</td>
<td headers="name">Kat Devlin</td>
</tr>
<tfoot>
<tr>
	<td>Number</td>
	<td>Name</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>

Open in new window


It looks like you needed to apply display: block to the <tr> tags in the header and footer explicitly to make it work.  Still don't know about the placement of the <tfoot> though
0
 
LVL 2

Author Comment

by:Robert Silver
ID: 40542670
Me either  tfoot is supposed to go after /thead   but this is frustrating because clearly it works for scrolling without the need to use javascript , however, it  has other problems with respect to how the cells will size with percents. Note
exact px sizes seem to work. I guess once you include display:block things get dicey

I will just look for JS version of scrollable tables because clearly this one is not so manageable
0
 
LVL 2

Author Closing Comment

by:Robert Silver
ID: 40542671
This does not not solve my problem which was getting the widths to work with percentages properly and the tfoot tags to display properly
in the order its supposed to follow.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40542683
tfoot is supposed to go after /thead  

I'm not 100% sure of that in this case.  tfoot will react unpredictability when using other objects as blocks.  I think you're seeing an issue because of that.

which was getting the widths to work with percentages properly

Both of my code samples above are working with % widths based on your sample code.  What else were you looking for?

however, it  has other problems with respect to how the cells will size with percents

You have to make sure you account for the scrollbar, which gets hard at percent widths across resolutions.

I will just look for JS version of scrollable tables because clearly this one is not so manageable

Agreed.  I suggest you look into this one:

http://www.datatables.net/
0
 
LVL 2

Author Comment

by:Robert Silver
ID: 40543240
That is not what I saw  I will look at it again.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40543298
Would love to see a screenshot if you saw something different...
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question