Bootstrap responsive table within display:table

Question

I have a Bootstrap responsive table which is within a div with the CSS display:table. This seems to be preventing the table from becoming responsive. How can I make the table responsive without changing the outer CSS?

JsFiddle

For reference, display:table is used to create a "sticky footer": How to create a sticky footer that plays well with Bootstrap 3

Yes, as mentioned, its used by the sticky footer and is not something I can readily change — user5633550, Sep 29 '16 at 05:10
It is responsive But your items are to long so it doesn't show the rest of table — SAM, Sep 29 '16 at 05:11

SAM · Answer 1 · 2016-09-29T05:36:47.067

1

If you don't want to change the current css you have to make your text responsive to fix this problem.
set the font size and instead of px use vm, vw, vh or vmin These suffixes make your text responseive.

edited Sep 29 '16 at 05:36

answered Sep 29 '16 at 05:16

SAM

281
3
15

Setting `font-size: 1vmin` on the table works but it makes the text so small its unreadable which isn't really a great solution – user5633550 Sep 29 '16 at 05:24
Use `font-size: 2vw` – SAM Sep 29 '16 at 05:44
Using 2vw leads to the table being too big for the viewport and gets whole page horizontal scrolling – user5633550 Sep 29 '16 at 06:26

score 0 · Answer 2 · answered Sep 29 '16 at 05:17

try this, may be this will help you

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
  height: 100%;
  width: 100%;
  display: table;
}
.table-responsive {
    border: 1px solid #ddd;
    display: -moz-stack;
    margin-bottom: 15px;
    overflow-y: hidden;
    width: 100%;
}


</style>
</head>
<body>

<div class="content-container">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Bookings</h3></div>
          <div class="bookings_list">
            <div class="row">
              <div class="col-xs-12">
                <div class="table-responsive">
                  <table class="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Customer</th>
                        <th>Provider</th>
                        <th>Agent</th>
                        <th>Service</th>
                        <th>Status</th>
                        <th>Status</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="clickable" action="push" href="/bookings/UY6001">
                        <td>123</td>
                        <td>John Smith</td>
                        <td>ACME Corp</td>
                        <td>Mike</td>
                        <td>123456</td>
                        <td>Active</td>
                        <td>Active</td>
                        <td>Active</td>
                      </tr>
                      <tr class="clickable" action="push" href="/bookings/UY6000">
                        <td>123</td>
                        <td>John Smith</td>
                        <td>ACME Corp</td>
                        <td>Mike</td>
                        <td>123456</td>
                        <td>Active</td>
                        <td>Active</td>
                        <td>Active</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

if you cant see responsive table here, just copy my code and paste in notepad, then try — Ganesh Putta, Sep 29 '16 at 05:21

score 0 · Answer 3 · answered Sep 29 '16 at 05:28

0

Set your container's width based on the viewport instead of a percentage value:

@media (max-width: 768px) {
  .container {
    width: 100vw;
  }
}

Updated Fiddle

Since container is a pretty common class in bootstrap, you might consider adding a custom class to the specific element you want to add this style to.

answered Sep 29 '16 at 05:28

Will Ray

10,621
3
46
61

Interesting solution but I still seem to get a little bit of whole page horizontal scrolling using 100vw and anything less creates a slight margin – user5633550 Sep 29 '16 at 06:27

Bootstrap responsive table within display:table

3 Answers3

Linked