Pages: 1 « previous     next »
Author Topic: Divs to emulate a table  (Read 6816 times) Bookmark and Share
Jr. Member
Posts: 75

View Profile WWW
« on: Jan 13, 2011, 12:13:13 pm »

Is there some basic CSS to make divs emulate a table, i.e. rows and columns? Examples I've found online don't really seem to work, unless I'm doing something really dumb (always a possibility).I'm trying to emulate a table with two columns and several rows. I found this example, but it doesn't quite do it:

Highlight Mode: (CSS)
  1. #container {
  2.  margin-left: auto;
  3.  margin-right: auto;
  4.  width: 13.75em;
  5. }
  6. #container .box {
  7.  border: 1px solid black;
  8.  background-color: gray;
  9.  color: black;
  10.  float: left;
  11.  line-height: 1.5;
  12.  margin: 0.5em;
  13.  text-align: center;
  14.  height: 1.5em;
  15.  width: 1.5em;
  16. }

HTML Code:
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box selected">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>

Posts: 22

View Profile
« Reply #1 on: Jan 13, 2011, 01:41:15 pm »

It displays as a table of 2 rows and 5 columns if I try it FF. Playing around with the width and height of each box gives me a table of 5 x 2 when the width is set between 3.5 and 5.5em.

It just depends on the width of the container and the width of each box individually (don't forget added margins and paddings!) to create the number of columns you want.
Pages: 1
Jump to: