[ANSWERED] css – How to add horizontal scroll on html table

Question 1

Put in a wrapper

.table-wrapper{
  width: 400px;
  overflow-x: scroll;
}

.table-wrapper table td, .table-wrapper table th{
  width: 100px;
}

<div class="table-wrapper">
<table>
  <thead>
    <tr>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
      <th>xxx</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
     <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
    </tr>
  </tbody>
</table>
</div>

Question 2

add this to the table class or id and also give it a specific width so if the cells take more space than the width the scroll will appear.

overflow-y: auto;

if you want the scroll to be loaded in from the beginning, put this.

overflow-y: scroll;

an example ->

<style>
 .scrolltable {
   width: 50px;
   overflow-y: scroll;
 }
</style>

<body>
<div class="scrolltable">
 <table>
  <tr>
   <th>assssssssssssssssssssss</th>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
  </tr>
  <tr>
   <td>dddddddddddddddd</td>
   <td>wwwwwwwwwwwwwwwwwwww</td>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
   <th>aaaaaaaaaaaaaaaaaaaaaaaf</th>
  </tr>
 </table>
 </div>
</body>

Question 3

I want to add horizontal scroll to my html table. The table width is 100% and the first cell with is fixed to 50 px. You can have hundreds of columns. So i want the first column, with the fixed width to be visible always but the other ones to became horizontally scrollable. All this columns widths need to be sized with the size of the text in the thead.

 <table>
                  <thead>
                    <tr>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                      <th>xxx</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                     <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                    <tr>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                      <td>xxx</td>
                    </tr>
                  </tbody>
                </table>

Bollate

[ANSWERED] css – How to add horizontal scroll on html table

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by How to Ask

Comment posted by How do I create an HTML table with a fixed/frozen left column and a scrollable body?

Comment posted by Add horizontal scrollbar to html table

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate