Horizontal Table With DataList And DIVs?

I'm trying to create a table layout with headers on the left and horizontally aligned fields. (See mock-up below.) I'm trying to accomplish this using a DataList -- stuck with .NET 2.0 -- and wrapped in a div with a scrollbar on the x-axis so that if enough groups are visible, a scroll bar will appear.

               Group One      Group Two      Group Three
Header One      Value          Value          Value
Header Two      Value          Value          Value
Header Three    Value          Value          Value
开发者_运维问答

I'm struggling with two points, both seen in the below code and jsFiddle.

• How do I keep the #itm blocks in a single line without explicitly defining a width on the #wrapper?
  • white-space: nowrap on #wrapper works here.
• How do I keep a consistent height on rows, even if data should vertically expand its parent DIV?
  • Setting an explicit height will work for me, given an approximate field length.

Original jsFiddle: http://jsfiddle.net/D6yXV/1/

Updated with fixes: http://jsfiddle.net/D6yXV/7/

HTML:

<div id="hdr">
    <label>Header One</label>
    <label>Header Two</label>
    <label class="highlight">Header Three</label>
    <label>Header Four</label>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Even More Data</span>
    <span>No More Data</span>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Actually, this is a large field and could stretch the row out some.</span>
    <span>Even More Data</span>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Even More Data</span>
    <span>No More Data</span>
</div>

</div>

CSS:

#wrapper { overflow-x: auto; }
#hdr, #itm { display: inline-block; padding: 3px; width: 150px; }
#itm { border-left: solid 1px #000; }
#hdr label { font-weight: 700; display: block; }
#itm span { display: block; }
.highlight { background-color: #EEE; }

---

Put a "float:left;" on the items? And remove itm from the hdr rule :)

Better yet, use a table (or Repeater) for tabular data :)

---

Seriously why aren't you using <table>'s?