CODEWITHSUNDEEP
htmlcsshtml-tablescrollbar
Sandy
Sandy

Reputation: 817

How do I add a horizontal scrollbar to a table in a div?

How can I add a horizontal scroll bar to a table that is inside a div? Is there CSS solution for this?

Upvotes: 6

Views: 40423

Answers (4)

DRTauli
DRTauli

Reputation: 771

If you only want a horizontal scrollbar use overflow-x:auto; then set the width.

div
{
width: 300px;
overflow-x:auto;
overflow-y:hidden;
}

Upvotes: 7

jasssonpet
jasssonpet

Reputation: 2119

To add the scrollbar use overflow:

div {
    width: 100px;
    overflow: auto;
}

You have to add width to the table too:

table {
    width: 300px;
}

http://jsfiddle.net/tpDGE/

Upvotes: 5

Tooraj Jam
Tooraj Jam

Reputation: 1612

Try it:

div {
    display: block;
    height: 200px;
    overflow: scroll;
}

Upvotes: 4

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

You will not be able to add a scrollbar to a table, but you can add it to a DIV containing your table.

For example: 

<div style="width: 400px; height: 200px; overflow: scroll;">
   <table>...</table>
</div>

Upvotes: 14

Related Questions