7

Is it possible to align the following 2 rows like a table ? The first row is a h2 because it is the title and the rest are lists. The first column should be quite wide but the rest can be as wide as the text inside. The columns must fill the width of the div.

<div>
<h2 class="header1">
<span class="span1">one</span>
<span class="span2">two</span>
<span class="span3">three</span>
<span class="span4">four</span>
</h2>
<ul><li>
<span class="span5">five</span>
<span class="span6">six</span>
<span class="span7">seven</span>
<span class="span8">eight</span>
</li></ul>
</div>

div {width: 500px;}
h2 span, li span {float: left; width: auto; white-space: nowrap;}

Example:

Example

Jane Watson
  • 545
  • 2
  • 8
  • 13
  • This can be done with CSS2's `display: table` and related rules, which is supported by all browsers except for IE until IE8. But I am interested in the actual reason for wanting to do this. – ThatMatthew Sep 08 '11 at 21:38
  • @ThatMatthew 1.) Many people (unfortunately) still use IE7 and these CSS2 properties are not supported. [w3schools](http://www3.w3schools.com/cssref/pr_class_display.asp) 2.) The old way of doing tables is not recommended by the W3C because it is difficult to extract data. [W3C](http://www.w3.org/TR/html5/tabular-data.html) – Jane Watson Sep 09 '11 at 06:34
  • I just want to make sure you know that _layout_ tables are what should be avoided. If you have a table of data, you should use a `table` tag. – ThatMatthew Sep 09 '11 at 14:26

3 Answers3

14

The HTML

<div class="table-like">
  <div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>
  <div>
    <span>five</span>
    <span>six</span>
    <span>seven</span>
    <span>eight</span>
  </div>
</div>

The CSS

.table-like {
  display: table;
  width: 500px;
}

.table-like div { 
  display: table-row;
}

.table-like div span { 
  display: table-cell;
}

/* add borders */
.table-like,
.table-like div span {
  border: 1px solid black;  
}

/* bold on 1st row */
.table-like div:nth-child(1) {
  font-weight: bold;
}

jsFiddle Demo

Simone
  • 20,302
  • 14
  • 79
  • 103
5

Honestly, if you're trying to display tabular data, use a table. There's nothing wrong with tables, only when you're using them to position non-tabular content. If you need help formatting a table, edit your question.

Wex
  • 15,539
  • 10
  • 64
  • 107
  • 1
    Sometimes you need tabular-like alignment but without using tables due to semantic markup. So I would delete this answer. – Marko Sep 08 '11 at 21:18
  • 4
    I wouldn't be so quick to jump to that conclusion. It's not uncommon for people to go to great lengths to avoid using table-less markup for no reason other than to boast a table-less site. – Wex Sep 08 '11 at 21:20
  • @Marko That is correct. It is only a small section of page that is in tabular-like format so I would like to stay away from using tables. – Jane Watson Sep 09 '11 at 06:40
0

Try to use display: inline-block:

h2{display: inline-block; margin:0 padding:0; min-width: 300px}/*use min-width what you want*/
ul, ul li{display: inline-block; margin:0; padding: 0;}
George Burton
  • 1
  • 2