CoderZone.org
Pages: 1 « previous     next »
  Print  
Author Topic: Divs to emulate a table  (Read 5572 times) Bookmark and Share
Max
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:

CSS:
Code:  
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. }
  17.  
 

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>
</div>


Logged
UnrealEd
Newbie
*
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.
Logged
Tags:
Pages: 1
  Print  
 
Jump to: