使用div溢出構建長表。 （twitter-bootstrap）

Question

我正在試圖建立一個divs表。表格應該很長，所以我必須使用overflow auto/hidden。

下面是結果http://jsfiddle.net/gj7vm/

問題是，當我嘗試添加標題爲.group格，一切突然崩裂（http://jsfiddle.net/ata5U/1/）。 （每個.group div應該包含其他div，就像表一樣，但是這裏我只是從簡單的.title div開始，它應該有固定的高度）

這怎麼解決？ 另外，有沒有什麼好的例子，類似於我想要構建的東西（一個長的HTML表格，溢出：hidden/auto）？

Answer 1

如果你想用div創建表格，爲什麼不使用CSS表格顯示值？他們會讓你的div像表格單元格一樣行事。

下面是CSS的例子：

div#screen { 
    height: 120px; 
    display: table; 
} 
#screen .row { 
    display: table-row; 
} 
.group { 
    width: 400px; 
    height: 100px; 
    color: #468847; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
    display: table-cell; 
} 

和HTML：

<div id="screen" class="well well-large"> 
    <div class="row"> 
    <div class="group"> 
     <div class="group-title">foobar</div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque. 
    </div> 
    <div class="group"> 
     <div class="group-title">foobar</div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque. </div> 
    <div class="group"> 
     <div class="group-title">foobar</div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque. 
    </div> 
    </div> 
</div> 

這裏有一個小提琴：http://jsfiddle.net/8g8sW/1/

當你使用這些，你不需要溢出： auto，因爲div會像表格單元一樣工作，並自動拉伸以適應其內容。

欲瞭解更多信息：http://www.vanseodesign.com/css/tables/

如果有，你不希望使用CSS表（例如瀏覽器支持）的理由，請這麼說，但他們似乎喜歡這樣做的最簡單，最明顯的選擇。