So I have a list of items that I want to be edited inline (using ajax). Im trying to decided if it is better to use a table or a ul...
This is what I have now
HTML Code:
<ul>
<li class="header round-top">
<div style="width: 170px; display: inline-block;">Title</div>
<div style="width: 380px; display: inline-block;">Descriptions</div>
<div style="display: inline">Action(s)</div>
</li>
<li>
<form name="item-1">
//.... form stuff goes here
</form
</li>
<li>
<form name="item-2">
//.... form stuff goes here
</form
</li>
</ul>
I like the idea of using the list method, but the problem is I have to set the width for each header div, which could be come a problem because I am using themes and inline styles are a bad idea (in my case atleast). What I rather do is set up a table where the header widths expand to fit the content, then the theme only needs to set the table width.
I thought I would do something like below because the form items need to be inline (in the list, I give each form item a style of "display: inline" in the css file).
HTML Code:
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
<tr>
<td>
<form name="item-1">
<table>
<tr>
<td>///item1</td>
<td>///item2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<form name="item-21">
<table>
<tr>
<td>///item1</td>
<td>///item2</td>
</tr>
</table>
</td>
</tr>
</table>
The problem with this is the headers do not fit the width of each form item, I still need to set each width individually.
So Im wondering if there is a better way that Im not thinking of to make each header match the width of each form item (input, textarea, etc) dynamically?
Keep in mind these forms are being generated using php.
Thanks,
Sam |
