CODEWITHSUNDEEP
csshtmltwitter-bootstrap
evfwcqcg
evfwcqcg

Reputation: 16335

Building a long table using divs with overflow. (twitter-bootstrap)

I'm trying to build a table with divs. The table should be very long, so I have to use overflow auto/hidden.

Here is the result http://jsfiddle.net/gj7vm/

The problem is, when I'm trying to add a title for .group div, everything suddenly breaks (http://jsfiddle.net/ata5U/1/). (each .group div should contain other divs, just like table, but here i'm just starting with simple .title div, which should have fixed height)

How can this be fixed? Also, are there any good examples of something similar to what I'm trying to build (a long html table with overflow:hidden/auto)?

Upvotes: 3

Views: 6726

Answers (1)

frostyterrier
frostyterrier

Reputation: 1912

If you're trying to build a table with divs, why don't you use CSS table display values? They will make your divs act like table cells.

Here's an example of the 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;
}

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

Here's a fiddle: http://jsfiddle.net/8g8sW/1/

When you use these, you don't need overflow: auto because the divs will act like table cells and automatically stretch to fit their content.

For more info: http://www.vanseodesign.com/css/tables/

If there's a reason that you don't want to use CSS tables (e.g. browser support), please say so, but they seemed like the easiest and most obvious choice for this.

Upvotes: 3

Related Questions