Make tds scrollable but leave th where it is?

Question

Let's say this is the table:

<table>
    <tbody>
         <tr>
             <th>something goes here</th>
             <td>dkjfkldfjlfjs</td> 
             <td>dkjfkldfjlfjs 4234324</td>
             <td>dkjfkldfjlfjfdgfdggs</td>
         </tr>
    </tbody>
</table>

Is it somehow possible to only scroll the tds from from left to right but leave the th where it is? Like when you fix a column in Excel where only the first column (the th) is frozen and the rest (all tds) scrolls at once.

here you can find some ideas : http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — richa_pandey, Feb 20 '14 at 12:50

score 0 · Answer 1 · answered Feb 20 '14 at 12:43

0

Yes. You can, just apply overflow-x:scroll; with a display:inline-block; to achieve what you are looking for.

WORKING DEMO

The CSS:

td {
    display: inline-block;
    overflow-x: scroll;
}

Hope this helps.

answered Feb 20 '14 at 12:43

Nitesh

15,091
4
44
55

@NathanLee : he want to freeze first column of table. Are u on the same path ? – richa_pandey Feb 20 '14 at 12:47
Its not exactly what I meant ... I wanted all the tds to scroll at once. I guess this is not possible? I updated my question. – user1856596 Feb 20 '14 at 12:48
Three `td's` can't scroll at once. Give me a graphic or an existing link of an example of how you want - @user1856596 – Nitesh Feb 20 '14 at 12:50
Yes, he wants a freeze column, but he has specifically mentioned to use scrolls on `td's` - @Era – Nitesh Feb 20 '14 at 12:50
@user1856596 you can add scroll to tbody instead of td – DRAJI Feb 20 '14 at 13:10

score 0 · Answer 2 · answered Feb 20 '14 at 13:27

0

Fiddle demo : Demo

When apply scroll to tbody, it may collapse table design. you have to manually apply width on header.

Adding scroll div block, below css is enough

min-height:200px;
overflow:auto;

For more details please check this blog post

answered Feb 20 '14 at 13:27

DRAJI

1,801
8
26
45

Make tds scrollable but leave th where it is?

2 Answers2