Responsive table issues in bootstrap

Question

I am trying to make my table in bootstrap responsive. My issue is that when the window size becomes smaller... I have to scroll the page itself instead of the table. I want to make it so the table scrolls not the page. I have used responsive styling for responsive tables in bootstrap

HTML:

<div class="wrapper">
  <div class="main">
    <div class="table-responsive">
      <table class="table" id="roleTable">
        <thead>
          <tr>
            <th>User</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Options</th>
          </tr>
        </thead>
        <tbody>
          <tr id="{{this.uid}}">
            <td>Name 1</td>
            <td>Email 1</td>
            <td>Phone Number 1</td>
            <td>
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Please Select
                  <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Option 1</a></li>
                  <li><a href="#">Option 2</a></li>
                  <li><a href="#">Option 3</a></li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS:

html, body, .wrapper {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.wrapper {
  display: table;
  max-width: 500px;
  margin: 0 auto;
}

.wrapper .main {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

Update:

I am using tables on the page to vertically align the content on the page.

JSFiddle Demo

score 1 · Answer 1 · answered Aug 01 '16 at 14:33

1

You could achieve this using overflow.

Just add table tbody { overflow: auto; }

https://jsfiddle.net/f061pk27/1/

answered Aug 01 '16 at 14:33

Ron van der Heijden

14,803
7
58
82

you removed the some styling which I used to make the table vertically centered – user4756836 Aug 01 '16 at 14:47
Why would you do this by turning the whole document into a table? – Ron van der Heijden Aug 01 '16 at 14:51
I wanted to make it vertically centered – user4756836 Aug 01 '16 at 15:04

score 0 · Answer 2 · answered Nov 11 '20 at 22:12

0

For solve responsive table problem in Safari :

 .table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
min-height: .01%;
overflow-x: auto;
}

answered Nov 11 '20 at 22:12

Safavi

194
2
5

Responsive table issues in bootstrap

2 Answers2

Linked