Centering a bootstrap table within an accordion panel - html

Question

I'm having a hard time centering a table I've put inside a panel of an accordion slider on my website. The page I'm talking about is this:
http://www.smartcuts.ch/index-TEST.html#latest
My html is
<div class="container">
<div class="row">
<div class="col-xs-11">
<div class="table-responsive">
<table summary="This table shows our rates" class="table table-condensed table-striped">
Can I center the table within the panel using some command in this html or must I use CSS? If so, please enlighten me. I've tried all kinds of stuff but nothing seems to work.
Thanks a lot.

Answer 1

You have to:
remove the containerclass or eventually use .container-fluid
use col-xs-12 instead of col-xs-11.
Here is the working code:
<div><!-- removed class .container -->
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table summary="This table shows our rates" class="table table-condensed table-striped">
<!-- Table content here-->
</table>
</div><!--end of .table-responsive-->
</div>
</div>
</div>
FINAL RESULT:

Answer 2

You don't have to kill the container class, you can update it to .container-fluid. And you don't need to change .col-xs-11 to .col-xs-12.
You can add an ID to the .col-xs-11 div and override two styles to center the div instead of the table itself. I am assuming that you picked .col-xs-11 because you wanted that specific width, and since the table is responsive it's inheriting the width of the containing div.
HTML:
<div class="container-fluid">
<div class="row">
<div id="center-table" class="col-xs-11">
<div class="table-responsive">
CSS:
#center-table{
float: none;
margin: 0 auto;
}
Working JS fiddle example:
https://jsfiddle.net/joeydehnert/oczyocwp