My bootstrap 4 table won't be responsive
Multi tool use
Clash Royale CLAN TAG#URR8PPPMy bootstrap 4 table won't be responsive
I use Bootstrap 4 HTML template and would like to have a nice table displayed in 320x480.
Here, the table I try to insert in that page won't be responsible even .table-responsive class has been added.
Would you please tell me what I did wrong ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Table</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/offcanvas.css" rel="stylesheet">
</head>
<body>
<div id="content">
<div id="display"><br>
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">MyPage</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<p></p>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div> <!-- class="collapse navbar-collapse" id="navbarsExampleDefault" -->
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-md-9">
<p class="float-right hidden-md-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<!-- Encart gris Jumbotron -->
<div class="jumbotron">
<h1>MyTable</h1>
<p>qwerty</p>
</div>
<!-- Tableau sensor -->
<div>
<table class="table table-bordered table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
</tbody>
</table>
</div>
<!-- fin Tableau sensor -->
<div class="row">
<div class="col-6 col-lg-4">
<img src="..." alt="..." class="img-thumbnail">
<p>1111</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>2222</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--col-12 col-md-9-->
<div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--col-6 col-md-3 sidebar-offcanvas-->
</div><!--row row-offcanvas row-offcanvas-right-->
<hr>
<footer>
<p>© Company 2017</p>
</footer>
</div><!--/.container-->
</div> <!-- fin div display -->
</div> <!-- fin div content -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- Responsive table -->
<!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script> -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/offcanvas.js"></script>
</body>
</html>
2 Answers
2
Your code is working. Are you sure you have added the Boostrap4 CSS files into your code?
Because, I just added the boostrap4 CSS from CDN to your code and it works perfectly fine. No change required.
Try to share a working fiddle/Codepen by sharing your complete code, which means upload your actual CSS somewhere.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="display"><br>
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">MyPage</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<p></p>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<!-- class="collapse navbar-collapse" id="navbarsExampleDefault" -->
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-md-9">
<p class="float-right hidden-md-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<!-- Encart gris Jumbotron -->
<div class="jumbotron">
<h1>MyTable</h1>
<p>qwerty</p>
</div>
<!-- Tableau sensor -->
<div>
<table class="table table-bordered table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
<th scope="row">
[HEADER]
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
</tbody>
</table>
</div>
<!-- fin Tableau sensor -->
<div class="row">
<div class="col-6 col-lg-4">
<img src="..." alt="..." class="img-thumbnail">
<p>1111</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div>
<!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>2222</p>
<p><a class="btn btn-secondary" href="#" role="button">View Graph »</a></p>
</div>
<!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--col-12 col-md-9-->
<div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div>
<!--col-6 col-md-3 sidebar-offcanvas-->
</div>
<!--row row-offcanvas row-offcanvas-right-->
<hr>
<footer>
<p>© Company 2017</p>
</footer>
</div>
<!--/.container-->
</div>
<!-- fin div display -->
</div>
<!-- fin div content -->
at first line, give div class , table-responsive ,
<div class=" table-responsive">
<table class="table table-bordered table-striped">
The question is for Bootstrap4, your answer is applicable to Bootstrap3. Check: v4-alpha.getbootstrap.com/content/tables/#responsive-tables
– Deepak Yadav
Mar 8 '17 at 8:12
When browsing the page in 320x480 format, it get lifters and the page see the screen capture here if the table would be totally responsible i should not have to use lifters to see all the columns.
– Laurent Coulon
Mar 8 '17 at 11:54
It is possible to turn off bootstrap 4 scroll bars into responsible table and have columns being rows in small resolution sizes such like this : css-tricks.com/examples/ResponsiveTables/responsive.php
– Laurent Coulon
Mar 9 '17 at 7:24
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
did you try to make a responsive table with bootstrap? because you should make more clear what is the problem and pasting the whole code make it very confusing. Try making a responsive table with bootstrap, you just add the col-md classes to the divs and add the proper class to the table div
– Fabrizio Bertoglio
Mar 8 '17 at 7:58