Scrollable and aligned CSS table

Question

I have a simple, I want a scrollable table with aligned columns.

I tried this (from https://stackoverflow.com/a/11483686/1599054):

<table>
    <thead>
        <tr><th>loooooooooooooong</th><th>headers</th></tr>
    </thead>
    <tbody>
        <tr><td>t</td><td>t</td></tr>
        <tr><td>t</td><td>t</td></tr>
        <tr><td>t</td><td>t</td></tr>
    </tbody> </table>

And the CSS:

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; }
td { height:50px; background:blue; margin:0px; cell-spacing:0px;}

You can see it here: http://jsfiddle.net/Rfgm2/1/

My problem is that I have a small content but big headers, is their a mean to "dynamically" aligne them?

http://stackoverflow.com/questions/673153/html-table-with-fixed-headers — Kevin Boucher, May 24 '13 at 22:39

adaam · Accepted Answer · 2013-05-25T10:52:23.260

I have found a working example for you. You must use a combination of div and table to achieve this:

<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th width="50%" style="word-wrap:break-word;">Short heading</th>
            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:325px; height:48px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

jsFiddle here: http://jsfiddle.net/2ZnWL/1/

Could you please highlight exactly what you changed? It makes your answer much more useful for others. — Michael Scheper, Oct 23 '14 at 06:48

score 1 · Answer 2 · answered May 24 '13 at 22:42

1

Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.

Fiddle

answered May 24 '13 at 22:42

Watson

105
6

2

If I do that, I loose the scroll. – GlinesMome May 25 '13 at 07:55

Scrollable and aligned CSS table

2 Answers2