在手风琴面板中居中放置一个自举表

我很难将居中放置在我的网站上的一个手风琴滑块面板中的一张桌子居中。我谈论的页面是这样的： 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？如果是这样，请赐教。我尝试了各种东西，但似乎没有任何工作。

非常感谢。

来源

2016-04-26 Luke6

好像如果你使用'容器fluid'和做工精细'山坳-xs-12'。 'container'具有固定的像素宽度，取决于屏幕尺寸，'container-fluid'只是填充可用宽度。 –

你必须：

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

最终结果：

来源

2016-04-26 16:32:34 fbid

优秀。非常感谢你。欢呼声 – Luke6

@ Luke6请考虑标记答案为接受，如果它解决了你的问题。谢谢 – fbid

你不必杀死容器类，您可以更新它到容器流体。而且您不需要将.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

来源

2016-04-26 17:16:08

您的解决方案不正确。如果您尝试在浏览器devtools中打开OP网站并添加代码，则表格不会集中在中等尺寸或大尺寸屏幕上。它在左边有更多的余量。 – fbid

它确实有效，只需将.container更新为.container-fluid即可解释来自OP网站上的.panel-body div的填充。照片来证明它。 –

在手风琴面板中居中放置一个自举表

回答

相关问题