How to make <div>, <span>, or list display tabular data as a table?

Question

First, let me say that I have read other responses on this, and I realize that for tabular data, using tables is the best way to go. The reason I am needed to use something other than a table is because I am using a jquery plugin (Jquery UI sortable to be exact) that requires certain rows of data to be nested inside of others. I know of no way to do this with tables, and thus I need to use another element (I am currently using divs).

My data is standard tabular data that is 1 cell per piece of data.

Name  Address              
Bob   123 Main    edit_button  drag&drop_button
Joe   123 Fake    edit_button  drag&drop_button
Sue   456 Road    edit_button  drag&drop_button
Ann   123 Street  edit_button  drag&drop_button

In this example, dragging Bob will also drag Joe and Sue, Bob's team, with him. Ann can only be moved on top of the three or below the three, while Joe and Sue can only switch places with each other.

In html, it appears like this.

<div class="table">
    <div class="header">Header information</div>
    <div>
        <div class="row">Bob's information</div>
        <div>
            <div class="row">Joe's information</div>
            <div class="row">Sue's information</div>
        </div>
    </div>
    <div>
        <div class="row">Ann's information</div>
    </div>
</div>

To my knowledge, this nesting cannot be done with tables.

I do not need to use divs, if something else would work better.

My question is basically how would I get this information to show up in a tabular format?

Currently, my best guess is to put each element of data, including the headers, in a div with fixed width (and apply borders as needed for appearance), but this means that the 'table' may not resize to best fit the information given.

Another attempt I have made, which is arguably much messier, is to, in each 'row', have a new table with the same setup, which includes a header that is not displayed. This gives almost the look I want, but some of the spacing is noticeably off if the names are not the exact length.

P.S. I hope the actual question is not too specific even though I think my justification for why a table will not work seems a bit too specific.

Edit:

Would there be some way to get the following to work so that a table could still be used?

<table>
    <thead>table header stuff</thead>
    <tbody>
        <mtne*>
            <tr>Bob's information</tr>
            <mtne>
                <tr>Joe's information</tr>
            </mtne>
            <mtne>
                <tr>Sue's information</tr>
            </mtne>
        </mtne>
        <mtne>
            <tr>Ann's information</tr>
        </mtne>
    </tbody>
</table>

*mtne = mythical table nesting element.

Edit 2:

Upon further testing, I've found that the css styling to make divs behave like tables has the same issue. where if the rows are not placed next to each other, and some are instead nested, they do not share width data. Due to time constraints, I'm having to just switch to using divs with preset widths.

To anyone else who may come along, there might be some possibility when using treeTables, but I have not yet tested it out and am needing to move on.

Answer 1

You can use CSS and divs to emulate tables, with display:table;, display:table-row;, display:table-cell; etc.

---

​Working demo on jsFiddle

HTML:

<div class="table">
  <div class="header">
    <div class="cell">Name</div>
    <div class="cell">Address</div>
    <div class="cell">Action 1</div>
    <div class="cell">Action 2</div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Bob</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Joe</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
    <div class="row">
      <div class="cell">Sue</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Ann</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
</div>

​CSS:

.table {
    display:table;
}
.header {
    display:table-header-group;
    font-weight:bold;
}
.rowGroup {
    display:table-row-group;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    width:25%;
}

---

Supported by IE8+ (it's a CSS2.1 feature)

Further reading:

• www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
• www.onenaught.com/posts/201/use-css-displaytable-for-layout
• www.w3.org/TR/CSS21/tables.html#table-display