1 reply [Last post]
sandrocchio_0.1
sandrocchio_0.1's picture
Offline
Regular
Italy-UK
Last seen: 14 years 26 weeks ago
Italy-UK
Joined: 2005-05-19
Posts: 12
Points: 0

Hi there,
my problem regards a substantial data table where I need to maintain the thead and the first column of each row fixed respect to the tbody.
The tbody should be able to scroll in order to allow the user to see all the data without loosing a costant reference.

Here belowe the code wich I developer till now. Obviously I cutted off some lines. Just keep in mind that in the thead I've about 115 th while in tbody we get to 115 rows.

I've to confess that I made many attempts without any success, and It's now getting frustrating.
Crying Crying Crying

So, if any of you would be so kind to help me to solve this problem I'll really appreciate :!:

Thanks in advance.

<style type="text/css">
#itsthetable {
	height:750px;
	width:1000px;
	overflow:auto;
	padding: 7px;
}

#itsthetable table {
	font: 80% Verdana;
	border-collapse: collapse;
}

/* table caption */
#itsthetable caption {
	height: 33px;
}


#itsthetable thead th {
	height: 66px;
	color: #FFFFFF;
	padding: 5px 5px 0 5px;
	border-right: 1px dashed #FFFFFF;
}

#itsthetable tbody td {
	border-right: 1px solid #E3F1C7;
	padding: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ABD555;
}
#itsthetable tbody .odd td {
	background: url(/dataTable/odd.png);
}
#itsthetable tbody th {
	padding: 15px;
	padding-right: 25px;
	color:#666666;
	border-bottom: 1px solid #93C331;
}

#itsthetable a {
	color: #485F18;
}

#itsthetable tfoot {
	height: 25px;
	color: White;
}

/* center table headers */
#itsthetable th {
	text-align: center;
}
</style>
</head>
<body>
<div id="itsthetable"> 
       
       
      <table summary="Planning">
<caption>turni</caption> 
        <thead> 
          <tr>
<th scope="col">Data</th>   
            <th scope="col">1</th>   
            <th scope="col">2</th>              
            <th scope="col">3</th>              
            <th scope="col">4</th>              
            <th scope="col">5</th>              
            <th scope="col">6</th>              
            <th scope="col">7</th>              
            <th scope="col">8</th>              
            <th scope="col">9</th>              
            <th scope="col">10</th>              
            <th scope="col">11</th>              
            <th scope="col">12</th>
</tr> 
        </thead>
        <tbody> 
          <tr> 
            <th scope="row">28/01/2006</th> 
            <td>0</td>  
            <td>0</td>     
            <td>0</td>             
            <td>0</td>              
            <td>0</td>              
            <td>0</td>              
            <td>0</td>             
            <td>0</td>              
            <td>0</td>              
            <td>0</td>              
            <td>0</td>
</tr>
<tr> 
            <th scope="row">29/01/2006</th> 
            <td>0</td>  
            <td>0</td>     
            <td>0</td>             
            <td>0</td>              
            <td>0</td>              
            <td>0</td>              
            <td>0</td>             
            <td>0</td>              
            <td>0</td>              
            <td>0</td>              
            <td>0</td>
</tr>
</tbody>
</table>
</div>

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 21 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[table overflow] fixed head and left column

Google for 'fixed header in data table' I found quite a few examples, one here http://www.imaputz.com/uportal/index.php?p=18 but it doesn't seem to include a static left column. Can that not be put outside the table?