What is the best way to include a horizontal scroll bar within a table enclosed in a div?

Question

Is there a way to include a horizontal scroll bar for a table within a div element? I'm curious if CSS offers a solution for this particular issue.

Answer 1

Answer №1

Adding a scrollbar directly to a table is not possible, however, you can include it within a DIV element that contains your table.

Here is an example:

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

Answer 2

Adding a scrollbar directly to a table is not possible, however, you can include it within a DIV element that contains your table.

Here is an example:

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

Answer 3

To achieve a horizontal scrollbar only, utilize overflow-x:auto; and then specify the width.

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

Answer 4

To achieve a horizontal scrollbar only, utilize overflow-x:auto; and then specify the width.

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

Answer 5

If you want to include a scrollbar, utilize the overflow property:

div {
    width: 120px;
    overflow: scroll;
}

Remember to specify the width of the table as well:

table {
    width: 400px;
}

Check out this link for a live example: http://jsfiddle.net/tpDGE/

Answer 6

If you want to include a scrollbar, utilize the overflow property:

div {
    width: 120px;
    overflow: scroll;
}

Remember to specify the width of the table as well:

table {
    width: 400px;
}

Check out this link for a live example: http://jsfiddle.net/tpDGE/

Answer 7

Give it a shot:

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

Answer 8

Give it a shot:

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