Link to home
Start Free TrialLog in
Avatar of Robert Silver
Robert SilverFlag for United States of America

asked on

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

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

Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

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.
Avatar of Robert Silver

ASKER

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

This may be cleanertablescrolltest.html
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
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.
ASKER CERTIFIED SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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.
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/
That is not what I saw  I will look at it again.
Would love to see a screenshot if you saw something different...