Reputation: 9408

Add a horizontal scrollbar to an HTML table

Is there a way to add a horizontal scrollbar to an HTML table? I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I cannot get either scrollbar to appear.

Upvotes: 239

Answers (20)

kinzzy goel

Reputation: 29

Representation of table

<div class="search-table-outter">
    <table class="table table-responsive search-table inner">
    </table>
</div>

Css to make Horizontal Dropdown

<style>
    .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; }
</style>

Upvotes: -3

Jelle Hak

Reputation: 499

Seems a bit overdone solutions. Cleanest is to just wrap it with a div like so:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

https://www.w3schools.com/howto/howto_css_table_responsive.asp

Upvotes: 5

Dibyodyuti Mondal

Reputation: 161

.wrapper {
  width: 0;
  min-width: 100%; //width 0, but min-width 100?? yes, I know...
  overflow: auto;
}

<div class="wrapper">
  <table></table>
</div>

table can have any width. I usually use 100% or max-content for the table.

Upvotes: 7

Mugetsu

Reputation: 1958

This is what worked for me

.wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

.wrapper table {
  width: auto;
  min-width: 100%;
}

<div class="wrapper">
   <table>...</table>
</div>

Upvotes: 4

George Chond

Reputation: 997

Like already stated, using display:block; on table is bad. I tried most of the answers in this thread, none worked as I wanted. If your HTML is structured like this:

<div>
  <table>
    <tbody>

And you want the parent div to be horizontally scrollable, you can try the following:

.text-left {text-align:left;} /* Ignore */

.x-auto {
  overflow-x: auto;
}

.table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

.table tbody {
  display: table;
  width: 100%;
}

<div class="x-auto">
  <table class="table text-left">
    <tbody>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
      </tr>
      <tr>
        <td>Some short text!</td>
        <td>Some really long text, like really really really really really really really really really really really really long!</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Riki krismawan

Reputation: 567

add tag table to div element with style="overflow-x:auto"

<div style="overflow-x:auto">
<table class="table table-bordered">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Username</b></th>
            <th><b>Email</b></th>
            <th><b>Avatar</b></th>
            <th><b>Status</b></th>
            <th><b>Action</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Upvotes: 1

Roger Willcocks

Reputation: 1669

Use the CSS attribute "overflow" for this.

Short summary:

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

e.g.

table {
    overflow: scroll;
}

Upvotes: 25

sarfrazanwar

Reputation: 391

I tried all the above solutions but had some issues with them.

If we add display: 'block' to the table, the cells do not occupy the full width. If we add it to the table wrapper, your custom table header like search, filter etc will also scroll which will look bad.

I was able to achieve the expected behaviour by adding overflow-x: auto to the body wrapper of the table.

Cells take full width even with less columns and a scroll bar appears automatically as needed.

Upvotes: 0

Khaled

Reputation: 927

For what it's worth, the best answer I found was here: https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}

Upvotes: 1

Serge Stroobandt

Reputation: 31518

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.

Here are more involved examples with scrolling table captions from a page on my website.

If an issue is taken about cells not filling the entire table, append the following additional CSS code:

table tbody {
    display: table;
    width: 100%;
}

Upvotes: 459

Mary7678

Reputation: 443

Edit: @WickyNilliams has noted that setting display: block on a table body will strip the table of semantics and thus is not a good solution due to accessibility issues.

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.

Upvotes: 22

Forrest

Reputation: 157

With bootstrap

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>

Upvotes: 2

akash samanekar

Reputation: 61

Insert the table inside a div, so the table will take full length

HTML

<div class="scroll">
 <table>  </table>
</div>

CSS

.scroll{
    overflow-x: auto;
    white-space: nowrap;
}

Upvotes: 6

Peps

Reputation: 184

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%;
}

Upvotes: 2

ochomoswill

Reputation: 431

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.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

Upvotes: 43

George

Reputation: 101

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;
}

Upvotes: 3

mpen

Reputation: 282885

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%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

Upvotes: 14

pasine

Reputation: 11543

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.

Upvotes: 102

Josh

Reputation: 101

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;
}

Upvotes: 10

Colin M

Reputation: 13348

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

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

Upvotes: 47

Add a horizontal scrollbar to an HTML table

Answers (20)

First, make a display: block of your table

Related Questions

First, make a `display: block` of your table