Bootstrap table won't fill container width

Question

I\'m writing a web site using bootstrap (3.3.2) with a simple table on one of the pages. I just have a simple header panel in one container, and another content container w

Answer 1

In most simple words !!

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

So for your requirement .table and .table-responsive will help you.

Answer 2

This solution worked for me:

just add another class into your table element: w-100 d-block d-md-table

so it would be : <table class="table table-responsive w-100 d-block d-md-table">

for bootstrap 4 w-100 set the width to 100% d-block (display: block) and d-md-table (display: table on min-width: 576px)

<div class="table table-responsive w-100 d-block d-md-table">
<table class="table">
 ---
</table>
</div>