如何将滚动条添加到html,将水平滚动条添加到html表

First, make a display: block of your table

then, set overflow-x: to auto.

table {

display: block;

overflow-x: auto;

white-space: nowrap;

}

Nice and clean. No superfluous formatting.

Did you try CSS overflow property?

overflow: scroll; /* Scrollbar are always visible */

overflow: auto; /* Scrollbar is displayed as it's needed */

UPDATE

As other users are pointing out, this is not enough to add the scrollbars.

So please, see and upvote comments and answers below.

Wrap the table in a DIV, set with the following style:

div.wrapper {

width: 500px;

height: 500px;

overflow: auto;

}

Use the CSS attribute "overflow" for this.

Short summary:

overflow: visible|hidden|scroll|auto|initial|inherit;

e.g.

table {

display: block;

overflow: scroll;

}

I was running into the same issue. I discovered the following solution, which has only been tested in Chrome v31:

table {

table-layout: fixed;

}

tbody {

display: block;

overflow: scroll;

}

I couldn't get any of the above solutions to work. However, I found a hack:

body {

background-color: #ccc;

}

.container {

width: 300px;

background-color: white;

}

table {

width: 100%;

border-collapse: collapse;

}

td {

border: 1px solid black;

}

/* try removing the "hack" below to see how the table overflows the .body */

.hack1 {

display: table;

table-layout: fixed;

width: 100%;

}

.hack2 {

display: table-cell;

overflow-x: auto;

width: 100%;

}

table or other arbitrary content	that will cause your page to stretch
uncontrollably	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

This is an improvement of Serge Stroobandt's answer and works perfectly. It solves the issue of the table not filling the whole page width if it has less columns.

.table_wrapper{

display: block;

overflow-x: auto;

white-space: nowrap;

}

...

I had good success with the solution proposed by @Serge Stroobandt, but I encountered the problem @Shevy had with the cells then not filling the full width of the table. I was able to fix this by adding some styles to the tbody.

table {

display: block;

overflow-x: auto;

white-space: nowrap;

}

table tbody {

display: table;

width: 100%;

}

This worked for me in Firefox, Chrome, and Safari on Mac.

I figured out this answer based on previous solution and it's comment and added some adjustments of my own. This works for me on the responsive table.

table {

display: inline-block;

overflow-x: auto;

white-space: nowrap;

// make fixed table width effected by overflow-x

max-width: 100%;

// hide all borders that make rows not filled with the table width

border: 0;

}

// add missing borders

table td {

border: 1px solid;

}

The 'more than 100% width' on the table really made it work for me.

.table-wrap {

width: 100%;

overflow: auto;

}

table {

table-layout: fixed;

width: 200%;

}

//Representation of table

//Css to make Horizontal Dropdown

.search-table{table-layout: auto; margin:40px auto 0px auto; }

.search-table, td, th {

border-collapse: collapse;

}

th{padding:20px 7px; font-size:15px; color:#444;}

td{padding:5px 10px; height:35px;}

.search-table-outter { overflow-x: scroll; }

th, td { min-width: 200px; }