Go Premium for a chance to win a PS4. Enter to Win

x
?
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
Medium Priority
?
167 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 1500 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

972 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