Even with col-xs-X classes defined, Bootstrap tables do not adhere to the grid layout system.
A simple example demonstrates how the table (highlighted in red) does not align properly with the grid (gray): http://jsfiddle.net/fm65v3e0/
.col-xs-1 {
background-color: #eee;
border: 1px solid #999;
}
th {
background-color: #fee;
border: 1px solid red;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table">
<tr>
<th class="col-xs-5">
5-col header
</th>
<th class="col-xs-3">
3-col header
</th>
<th class="col-xs-4">
4-col header
</th>
</tr>
</table>
</div>
</div>
</div>
</div>The padding around columns causes the misalignment of the table within the grid. Removing column padding will fix the alignment issue but may affect the spacing between text in columns.
Furthermore, Bootstrap tables default to 100% width and distribute any excess space when not all 12 grid columns are utilized.
Given that my site primarily consists of tabular data, it is crucial for my tables to conform to the grid system. Is there an easy solution to this problem? Should I prioritize resolving this issue or is it insignificant?