在手风琴面板中居中引导表

Question

我很难将一张桌子放在我的网站上的手风琴滑块面板中。我正在谈论的页面是这样的： http://www.smartcuts.ch/index-TEST.html#latest

我的HTML是

<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">

我可以使用此html中的某个命令将表格置于面板中心，还是我必须使用CSS？如果是的话，请赐教。我尝试过各种各样的东西，但似乎没什么用。

非常感谢。

Answer 1

你必须：

• 删除container类或最终使用.container-fluid
• 使用col-xs-12代替col-xs-11。

以下是工作代码：

<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>

最终结果：

Answer 2

您不必杀死容器类，您可以将其更新为.container-fluid。而且您不需要将.col-xs-11更改为.col-xs-12。

您可以在.col-xs-11 div中添加ID，并覆盖两种样式以使div居中而不是表本身。我假设您选择了.col-xs-11，因为您想要特定的宽度，并且由于表格是响应的，它继承了包含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;
}

工作JS小提琴示例：

https://jsfiddle.net/joeydehnert/oczyocwp