Recreate Table with Divs
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>
开发者_Go百科 <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!
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
精彩评论