CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Steinfeld
Steinfeld

Reputation: 689

Bootstrap Responsive Tables Break Vertically

I have the following html with a responsive table. When the page is accessed via mobile, the user has to scroll horizontally to view the entire content, is there a bootstrap way to break the columns vertically so a mobile user does not have to scroll horizontally ?

<!DOCTYPE html> <html> <head>   <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/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

<div class="container">   <h2>Table</h2>   <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                <div class="table-responsive">             <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>   </table>   </div> </div>

</body> </html>

The last example here (No More Tables) shows the desired behavior perfectly https://elvery.net/demo/responsive-tables/ though it is not done with bootstrap.

If anyone can shed light on how to achieve this with bootstrap, ill appreciate.

Upvotes: 2

Views: 3154

Answers (4)

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16243

Here you have a working example wherein the threshold is 500px. Change this value according to your needs. Reduce to the window width to test the results:

@media all and (max-width:500px) {
  table.table tr {
    display: table;
    width:100%;
    margin: 1em auto;
    border-top: 2px solid;
  }
  table.table td,
  table.table th {
    display: table-row;
    text-align:center;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Smith</td>
        <td>38</td>
        <td>Lisbon</td>
        <td>Portugal</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Use this way

@media screen and (max-width: 640px) {
  table#customDataTable caption {
    background-image: none;
  }
  table#customDataTable thead {
    display: none;
  }
  table#customDataTable tbody td {
    display: block;
    padding: .6rem;
  }
  table#customDataTable tbody tr td:first-child {
    background: #666;
    color: #fff;
  }
  table#customDataTable tbody tr td:first-child a {
    color: #fff;
  }
  table#customDataTable tbody tr td:first-child:before {
    color: rgb(225, 181, 71);
  }
  table#customDataTable tbody td:before {
    content: attr(data-th);
    font-weight: bold;
    display: inline-block;
    width: 10rem;
  }
  table#customDataTable tr th:last-child,
  table#customDataTable tr td:last-child {
    max-width: 100% !important;
    min-width: 100px !important;
    width: 100% !important;
  }
}



<table class="table" id="customDataTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/lalji1051/nd7a2kp0/4/

Upvotes: 0

C. Skjerdal
C. Skjerdal

Reputation: 3099

An alternative solution is to use Bootstrap.

Edit: Okay so I added this as a snippet. It technically works, however I am uncertain if this perfectly answers the question since it is converting rows into columns, instead of stacking the columns correctly. I know I did solve this on a previous project, I'll perhaps come back to this if I can find that code that is based off this chunk.

#pricing-detailed-section .feature-comparison-table-header-cell {
  padding: 15px;
  border: 1px solid #DFE1E5;
  font-size: 1rem;
  padding-top: 40px;
  height: 100px;
}

#pricing-detailed-section .bold {
  font-weight: 600;
}

#pricing-detailed-section .feature-comparison-table-cell {
  height: 100px;
  border: 1px solid #DFE1E5;
  background-color: #FFF;
  display: table;
}

#pricing-detailed-section .feature-comparison-table-cell p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<!doctype html>
<html lang="en">

<body>
  <div id="pricing-detailed-section">
    <div class="col-md-12" style="padding-top:10%">
      <div class="row">
        <div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Compare Editions
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Lite
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Standard
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Premium
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Professional
        </div>
      </div>
      <div class="row">
        <div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell">
          Monthly Flat Rate
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>Free</p>
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>
            $40/Month
          </p>
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>
            $50/Month
          </p>
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>
            $60/Month
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

When you switch to mobile, it'll fit everything vertically. Note the code for the paragraph section solves multi-line fields not being centered.

Upvotes: 1

Ramiz Web Dev
Ramiz Web Dev

Reputation: 611

<!DOCTYPE html> <html> <head>   <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/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

<style>
.table-responsive{
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}    
</style>

<div class="container">   <h2>Table</h2>   <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>    <div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>   </table>   </div> </div>

</body> </html>

no need to do anything only put css as i putted on style tag that work perfectly i hope this work good. thanks.

Upvotes: 0

Related Questions