CODEWITHSUNDEEP
javascripthtmlcssajaxbootstrap-4
Amit Rathod
Amit Rathod

Reputation: 51

Add Horizontal Scroll bar to table in html

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>

Upvotes: 2

Views: 7739

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26360

  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>

Upvotes: 5

shtse8
shtse8

Reputation: 1365

<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

Upvotes: 2

Related Questions