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
159 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
[X]
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
  • 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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

Technology Partners: 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!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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.
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…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

622 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