在手風琴面板中居中放置一個自舉表

我很難將居中放置在我的網站上的一個手風琴滑塊面板中的一張桌子居中。我談論的頁面是這樣的： 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的填充。照片來證明它。 –

在手風琴面板中居中放置一個自舉表

回答

相關問題