0

I have to make some kind of dashboard. It will be basically a table, with a lot of numbers (those a,b,c-s are all numbers, probably max 3 digits)

This is what I would like to do

My problem is, that, as you can see in the picture, I have a few sections which will be dynamic (as in: I don't know how many records) and because of this, I need to add a scrollbar for those sections.

Because of the scroll bars, I cannot put everything in one table (or can I?), and this might cause that the same column might not be aligned all the time. It has to work in basically all the latest version browsers, and I am afraid of losing a pixel to the left or to the right.

What I am trying to achieve is basically something like this: (note that I added the DIV in the wrong place on purpose)

<table>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
<div id="div2" style="overflow-y: auto; overflow-x:hidden; height: 60px;>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
</div>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
</table>

Not sure if this is important or not, but I would like to use that scrollbar which is showing up onmouseover. Like this one.

1
  • you want the headers to be fixed, thats it?
    – Toping
    Feb 14, 2013 at 13:49

2 Answers 2

1

You need to know what all tags you need to use before coding this.

  1. <div> cannot come directly as a child to <table>. Use <tbody> instead. Even though you have added it on purpose, I suggest this to you. :)
  2. Wrap the headers in <thead> and give a right padding.

So, ultimately, your code should look like:

<table>
    <thead>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        </div>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </tbody>
</table>

And your CSS like:

tbody {overflow-y: auto; overflow-x:hidden; height: 60px;}

And for your questions...

  1. Because of the scroll bars, I cannot put everything in one table (or can I?)

    Yes! You can put them in a single table by appending them inside <tbody> tags. Also note that, there can be many <tbody> tags inside one table.

  2. I would like to use that scrollbar which is showing up onmouseover.

    You can do that using a simple CSS.

    tbody {overflow: hidden;}
    tbody:hover {overflow: auto;}
    

    If you want the scrollbars to be styled like how Facebook has, you need to use a plugin called jScrollPane.


    (source: tympanus.net)

  3. If you feel that you need some more awesome effects on your tabular data, go for DataTables, a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.


    (source: webresourcesdepot.com)

0
0

I ended up using fix width, something I wanted to avoid, but I couldn't

Praveen Kumar's answer was just not working for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.