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
142 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
Comment Utility
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
Comment Utility
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
Comment Utility
This may be cleanertablescrolltest.html
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
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
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
That is not what I saw  I will look at it again.
0
 
LVL 70

Expert Comment

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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
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…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now