Table with static header and scrollable columns and rows when width & height xceeds

hi every one,

Iam new to CSS…

Iam using displaytag, for displaying the data in a table…

I have come out with few issues…which i think can be overcommed through CSS

First Issue

  1. The number of columns displayed in the table.

I have to display around 15 to 20 columns in a table…
with this 15 to 20 columns in a table, i can see scrollbar to the page …but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page)

I need a fixed table width and height and also fixed column width and height…
Note: I dont mind if columns are not visible (thru scrool bar i should see the hidden columns)

2.I need a static header table with scrollable columns and rows…

need help regarding…
thanks in advance…

Hi, we need to see your current code in order to help you any-we won’t write up code for you. Post your complete code and we will help :slight_smile:

Check out this thread which outlines what you want

<link href=“main.css” rel=“stylesheet” type=“text/css”/>
<html>
<head>

&lt;link rel="stylesheet" href="css/screen.css" type="text/css"/&gt;
&lt;/head&gt;

<body>

<div style=“overflow:auto;width:950px;height:400px” align=“center” >

<table class=“its” border=“1” >
<thead>
<tr>
<th></th>
<th></th>
<th class=“sortable”>Company</th>
<th class=“sortable”>Pattern</th>
<th class=“sortable”>Description</th>
<th class=“sortable”>Day1</th>
<th class=“sortable”>Day2</th>
<th class=“sortable”>Day3</th>
<th class=“sortable”>Day4</th>
<th class=“sortable”>Day5</th>
<th class=“sortable”>Day6</th>
<th class=“sortable”>Day7</th>
<th class=“sortable”>Day8</th>
<th class=“sortable”>Day9</th>
<th class=“sortable”>Day10</th>
<th class=“sortable”>Day11</th>
<th class=“sortable”>Day12</th>
<th class=“sortable”>Day13</th>
<th class=“sortable”>Day14</th>
<th class=“sortable”>Day15</th>
<th class=“sortable”>Day16</th>
<th class=“sortable”>Day17</th>
<th class=“sortable”>Day18</th>
<th class=“sortable”>Day19</th>
<th class=“sortable”>Day20</th>
<th class=“sortable”>Day21</th>
<th class=“sortable”>Day22</th>
<th class=“sortable”>Day23</th>
<th class=“sortable”>Day24</th>
<th class=“sortable”>Day25</th>
<th class=“sortable”>Day26</th>
</tr></thead>
<tbody>
<tr class=“odd”>

<td>COMP1</td>
<td>ABC</td>
<td>DEF</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>OFF</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td></tr>
<tr class=“even”>

<td>COMP1</td>
<td>bbc</td>
<td>bbc</td>
<td>OFF</td>
<td>NIGHT</td>
<td>ORIG</td>
<td>NIGHT</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>ORIG</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>ORIG</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>ORIG</td>
<td>ORIG</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>ORIG</td></tr>
<tr class=“odd”>

<td>COMP1</td>
<td>ORIG</td>
<td>ORIGERAL</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td></tr>
<tr class=“even”>

<td>COMP2</td>
<td>mae</td>
<td>maeshift</td>
<td>mshift</td>
<td>mshift</td>
<td>mshift</td>
<td>mshift</td>
<td>mshift</td>
<td>OFF</td>
<td>OFF</td>
<td>ashift</td>
<td>ashift</td>
<td>ashift</td>
<td>ashift</td>
<td>ashift</td>
<td>OFF</td>
<td>OFF</td>
<td>eshift</td>
<td>eshift</td>
<td>eshift</td>
<td>eshift</td>
<td>eshift</td>
<td>OFF</td>
<td>OFF</td>
<td>mshift</td>
<td>mshift</td>
<td>mshift</td>
<td>mshift</td>
<td>mshift</td>
<td>OFF</td>
<td>OFF</td></tr>
<tr class=“odd”>

<td>COMP1</td>
<td>off</td>
<td>startswithoff</td>
<td>OFF</td>
<td>OFF</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>OFF</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>OFF</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>ORIG</td>
<td>OFF</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>NIGHT</td>
<td>OFF</td>
<td>OFF</td></tr></tbody></table>

</div>
</body>
</html>


Actually i have modified a bit, i have not included the css file used in this file…if possible let me know…i wll attach it…

Thanks for the reply…actually i have used displaytag library for displain the table…

That’s pretty broken code. First you don’t have a doctype so your pages are in quirks mode for IE. Second you can’t put a <link> outside of the <head> section and certianly not before <html>

Go to the thread I linked to and use some of their code.

You have pointed me to “CSS - Test Your CSS Skills Number 23 :” but this is not what iam looking for

I have gone through your site and seen the “3 Column Layout-Scrollable Content”
i need some what like this layout where header (assume table header) is fixed and its content (columns) scrollable

Oh Ok…

Here is noe of a fixed header and footer.

BTW don’t look at that example on my site-it is still in beta phase as I’m still wrinkling out iE6. It’s being a pain though.

thanks for the reply…

How to apply this to a table i.e. fixed table header and scrollable columns ?

Also let me know how to get horrizontal scrollbar, if content exceeds beyond the page

thanks in advance…

HI,

Ryan sent you to the wrong thread and I think he meant to send you to the quiz I set for fixed table headers here:

Here is an example:
http://www.pmob.co.uk/temp/table-fixed-header-example.htm

What link did I give? Oh snap I’m sorry yes I meant that Paul. I had a lot tof the CSS quizzes open and I guess I copied the wrong one.

hi, thanks for the reply…Mr. Paul O’B

I have to display around 15 to 20 columns in a table…
display 15 to 20 columns in that area is dificult to fit and view, so iam expecting a horrizontal scrollbar to the table…please let me know how to achieve this

thanks

Hi,

I think we’re at the limits of what css can do.

If you want this as one single table with fixed header and fixed first column to allow sideways scroll then you will need to add some javascript to do what you want.

Have a look here.

thanks for the reply…i wll try and let you know the result