嵌套表寬度問題

我有嵌套表寬度問題的問題。我需要將表作爲響應。像以下圖片一樣。這是我的代碼DEMO嵌套表寬度問題

enter image description here

HTML

<div class="layout"> 
    <div class="left">Left</div> 
    <div class="right"> 
    <div class="table-responsive"> 
     <table> 
     <tr> 
      <th>Sample Headding</th> 
      ... 
     </tr> 
     <tr> 
      <td>Sample Headding</td> 
      ... 
     </tr> 
     </table> 
    </div> 
    </div> 
</div>

CSS

.layout { 
    width: 800px; 
    display: table; 
} 
.layout .left, .layout .right { 
    display: table-cell; 
} 
.layout .left { 
    width: 25%; 
    background: #eee; 
} 

.table-responsive { 
    width: 100%; 
    margin-bottom: 15; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #CCC; 
    -webkit-overflow-scrolling: touch; 
} 

.table-responsive > .table > thead > tr > th, 
.table-responsive > .table > thead > tr > td, 
.table-responsive > .table > tbody > tr > th, 
.table-responsive > .table > tbody > tr > td, 
.table-responsive > .table > tfoot > tr > th, 
.table-responsive > .table > tfoot > tr > td { 
    white-space: nowrap; 
}

來源

2014-05-19 Jeyarathnem Jeyachanthuru

我在這裏沒有看到任何嵌套表格。 – Ranjith

嵌套表格表示父div是display：table。 –

您是否嘗試過「表佈局：固定;」財產？

的jsfiddle：http://jsfiddle.net/manublueheart/c6CdL/3/

.layout { 
width: 800px; 
display: table; 
table-layout:fixed;  
}

來源

2014-05-19 12:07:51 Manu

它的工作..非常感謝你.. :) –

很高興幫助:) @JeyTheva – Manu

一樣多，我知道表不能作出迴應。而不是表格使用div，並給予他們寬度的百分比，這將是響應。

來源

2014-05-19 12:09:48 Nothing

嵌套表寬度問題

回答

相關問題