-4

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>
Martin
  • 21
  • 4
  • Please read also [ask] and [mcve] – Sfili_81 Jan 28 '20 at 12:48
  • Does this answer your question? [How do I create an HTML table with a fixed/frozen left column and a scrollable body?](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b) – Mimakari Jan 28 '20 at 12:49
  • Does this answer your question? [Add horizontal scrollbar to html table](https://stackoverflow.com/questions/5533636/add-horizontal-scrollbar-to-html-table) – Lalji Tadhani Jan 28 '20 at 13:06

2 Answers2

0

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>
hannon qaoud
  • 79
  • 1
  • 12
0

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>
Andam
  • 2,087
  • 1
  • 8
  • 21