[table overflow] fixed head and left column

1 reply [Last post]

Tue, 2006-04-11 10:47

sandrocchio_0.1

Offline

Regular

Italy-UK

Last seen: 18 years 2 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.

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>

Tags:

Beginners CSS Questions

Tue, 2006-04-11 22:08

DisinfectedBarfbag

Offline

Enthusiast

Kent, UK

Last seen: 3 years 6 weeks ago

Kent, UK

Timezone: GMT+1

Joined: 2005-08-06

Posts: 411

Points: 1