CODEWITHSUNDEEP
csstwitter-bootstrap
user5633550
user5633550

Reputation: 95

Bootstrap responsive table within display:table

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

Upvotes: 0

Views: 808

Answers (3)

SAM
SAM

Reputation: 281

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. enter image description here

Upvotes: 1

Will Ray
Will Ray

Reputation: 10879

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.

Upvotes: 0

Ganesh Putta
Ganesh Putta

Reputation: 2671

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>

Upvotes: 0

Related Questions