Dev Me
asked on
Bootstrap grids and responsive table
I am using bootstrap grid and responsive table. I need to show four tables in a row. So my code looks like this..
The problem: is in responsiveness... when I reduce the size of the browser, table shows horizontal scroll , instead of continuously wrapping and stacking tables by resizing them. I want it to be able to resize and position appropriately as I expand or reduce my page size. How can I achieve this?
<div class="row">
<div class="col-sm-3">
<div class="responsive-table">
<table class="table table--bordered table--nostripes table--wrap table--compressed table--nowrap--col--1">
<thead>
<tr>
<th colspan="2" class="text-center">How Bad</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:none">Priority:</td>
<td style="border:none">NA</td>
</tr>
<tr>
<td style="border: none">DE-priority:</td>
<td style="border: none">3</td>
</tr>
<tr>
<td style="border: none">BadCodeFlag:</td>
<td style="border: none">N</td>
</tr>
<tr>
<td style="border: none">Regression:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Is-customer-visible:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Not-customer-visible-reason:</td>
<td style="border: none">Defect ignored - The IGNORE/PREFCS flags are in the RNE-More Info:<a
href="http://swtg.cisco.com/display/BST/When+a+Bug+is+Not+Visible+to+Customers">Visibility Conditions </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-3">
<div class="responsive-table">
<table class="table table--bordered table--nostripes table--wrap table--compressed table--nowrap--col--1">
<thead>
<tr>
<th colspan="2" class="text-center">How Bad</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:none">Priority:</td>
<td style="border:none">NA</td>
</tr>
<tr>
<td style="border: none">DE-priority:</td>
<td style="border: none">3</td>
</tr>
<tr>
<td style="border: none">BadCodeFlag:</td>
<td style="border: none">N</td>
</tr>
<tr>
<td style="border: none">Regression:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Is-customer-visible:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Not-customer-visible-reason:</td>
<td style="border: none">Defect ignored - The IGNORE/PREFCS flags are in the RNE-More Info:<a
href="http://www.hotmail.com/chain/chain/chain/chain">Visibility Conditions </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-3">
<div class="responsive-table">
<table class="table table--bordered table--nostripes table--wrap table--compressed table--nowrap--col--1">
<thead>
<tr>
<th colspan="2" class="text-center">How Bad</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:none">Priority:</td>
<td style="border:none">NA</td>
</tr>
<tr>
<td style="border: none">DE-priority:</td>
<td style="border: none">3</td>
</tr>
<tr>
<td style="border: none">BadCodeFlag:</td>
<td style="border: none">N</td>
</tr>
<tr>
<td style="border: none">Regression:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Is-customer-visible:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Not-customer-visible-reason:</td>
<td style="border: none">Defect ignored - The IGNORE/PREFCS flags are in the RNE-More Info:<a
href="http://www.hotmail.com/chain/chain/chain/chain">Visibility Conditions </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-3">
<div class="responsive-table">
<table class="table table--bordered table--nostripes table--wrap table--compressed table--nowrap--col--1">
<thead>
<tr>
<th colspan="2" class="text-center">How Bad</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:none">Priority:</td>
<td style="border:none">NA</td>
</tr>
<tr>
<td style="border: none">DE-priority:</td>
<td style="border: none">3</td>
</tr>
<tr>
<td style="border: none">BadCodeFlag:</td>
<td style="border: none">N</td>
</tr>
<tr>
<td style="border: none">Regression:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Is-customer-visible:</td>
<td style="border: none">Y</td>
</tr>
<tr>
<td style="border: none">Not-customer-visible-reason:</td>
<td style="border: none">Defect ignored - The IGNORE/PREFCS flags are in the RNE-More Info:<a
href="http://www.hotmail.com/chain/chain/chain/chain">Visibility Conditions </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>The problem: is in responsiveness... when I reduce the size of the browser, table shows horizontal scroll , instead of continuously wrapping and stacking tables by resizing them. I want it to be able to resize and position appropriately as I expand or reduce my page size. How can I achieve this?
I work a lot with Bootstrap and for responsive table the best option to my opinion is to use Datatables with responsive
https://datatables.net/extensions/responsive/examples/initialisation/className.html
You can create your package using what you need
https://datatables.net/download/
Plus Datatables have plenty of useful feature (pages, export, resize ...) and it is very flexible.
https://datatables.net/extensions/responsive/examples/initialisation/className.html
You can create your package using what you need
https://datatables.net/download/
Plus Datatables have plenty of useful feature (pages, export, resize ...) and it is very flexible.
ASKER
I will try out both solution and update the post.
ASKER
@NerdsOfTech
using .table-responsive-sm indeed removes the horizontal scroll bar but at the expense of expanding or overlapping to adjacent column.
using .table-responsive-sm indeed removes the horizontal scroll bar but at the expense of expanding or overlapping to adjacent column.
ASKER
@lenamtl
Datatables don't scroll but reducing browser size does hide the column which is not ideal.
Datatables don't scroll but reducing browser size does hide the column which is not ideal.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You'll want to use the lowest breakpoint in the class set: .table-responsive-sm
(note: at XS breakpoint, the horizontal scrolling will appear by default)
ref: https://getbootstrap.com/docs/4.0/content/tables/#always-responsive
Open in new window