Recreate Table with Divs

Question

I'm trying to recreate a table with divs. I want to be able to put elements between the rows so that when a user clicks on a specific row, a description of the data in the row can appear between the rows.

I need the columns to align even if there are elements between the rows. I also need the "cells" to word wrap or push the boundaries similar to tables. The table that I am trying to recreate is 100% width and the page also has expanding widths. I can make the table be a set width, but I'm supporting several screen sizes so keeping the 100% would be best

Thanks for any help!

EDIT:

Here is what I ended up doing (MVC With Razor):

    <table style="width: 100%">
        <tr>
            <th>
                Data1
            </th>
            <th>
                Data2
            </th>
            <th>
                Data3
            </th>
            <th>
                Data4
            </th>
            <th>
                Data5
            </th>
            <th>
                Data6
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr id="@item[0]">
                <td>
                    <span style="padding-left: 5px">+</span> <span style="padding-left: 15px">@item[0]</span>
                </td>
                <td>
                    @item[1]
                </td>
                <td>
                    @item[2]
                </td>
                <td>
                    @item[3]
                </td>
                <td>
                    @item[4]
                </td>
                <td>
                    @item[5]
                </td>
            </tr>
            <tr id="Expander@item[5]" style="display: none">
                <td colspan="6">
                </td>
            </tr>
        }
    </table>

Then I just did some jquery to control all of the expanding/contracting

Worked great!

Answer 1

If you have tabular data stick to tables. For what you want to do take a look at the colspan attribute. It enables a table cell to span over multiple columns (even all of them).

For maximum width, set width:100% on the table.

Good luck,
Alin