javascript - Add Horizontal Scroll bar to table in html - Stack Overflow

admin管理员组

文章数量:1324824

I want to have an Horizontal scroll bar to my table.

Html code:

As you can see i have already used bootstrap but still it is not working. in other modules it is working fine. The tbody data is added after an ajax is called.

I have also tried with :

overflow-x: auto
white-space: nowrap

The data is not showing properly to the right side: it is going outside the screen size i have to zoom it out to see the whole table.

<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

I want to have an Horizontal scroll bar to my table.

Html code:

As you can see i have already used bootstrap but still it is not working. in other modules it is working fine. The tbody data is added after an ajax is called.

I have also tried with :

overflow-x: auto
white-space: nowrap

The data is not showing properly to the right side: it is going outside the screen size i have to zoom it out to see the whole table.

<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

• javascript
• html
• css
• ajax
• bootstrap-4

Share Improve this question Follow edited Mar 17, 2021 at 10:27 Kareem Dabbeet 3,99433 gold badges1818 silver badges3535 bronze badges asked Mar 17, 2021 at 10:00 Amit RathodAmit Rathod 5122 silver badges88 bronze badges 1

• 1 enclose your table in a div. Constrain this div to 100% width. Add overflow-x:auto to this div. – Jeremy Thille Commented Mar 17, 2021 at 10:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

1. Enclose your table in a div (which is already done, in your case)

2. Constrain this div with width:100vw. This is bulletproof. width:100% means "100% of the parent's width", but if the parent is already larger than the screen, it won't work. width:100vw means "100% of the Viewport's Width" and does not depend on anything else.

3. Add overflow-x: auto to allow horizontal scrollbar. Job done

Demo below

#new-modal {
    width : 100vw;
    overflow-x: auto;
}

<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
            <th>HEADER 11</th>
            <th>HEADER 12</th>
            <th>HEADER 13</th>
            <th>HEADER 14</th>
            <th>HEADER 15</th>
            <th>HEADER 16</th>
            <th>HEADER 17</th>
            <th>HEADER 18</th>
            <th>HEADER 19</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="new-modal" style="width:100%;overflow-x:scroll;">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

what you are looking for is width: 100%; overflow-x: scroll

本文标签： javascriptAdd Horizontal Scroll bar to table in htmlStack Overflow