Hello
First, thanks to the css-d makers for your efforts to get this great
list back online!
To my question. I have a form, which I put in a layout table:
<table>
<tr>
<td colspan="2"><h2>First section of the form:</h2></td>
<tr>
<tr>
<td><label>Mylabel</label></td>
<td><input type="text"></td>
</tr>
... (more label/input pairs) ....
<tr>
<td colspan="2"><h2>Other section, quite long title</h2></td>
</tr>
<tr>
<td><label>Otherlabel</label></td>
<td><input type="text"></td>
</tr>
... (more label/input pairs) ....
</table>
In order to make it responsive, I changed it to <div>s, and applied CSS
display:table-* declarations.
<div>
<div>
<div class="colspan"><h2>First section of the form:</h2></div>
<div>
<div>
<div><label>Mylabel</label></div>
<div><input type="text"></div>
</div>
... (more label/input pairs) ....
<div>
<div class="colspan"><h2>Other section, quite long title</h2></div>
</div>
<div>
<div><label>Otherlabel</label></div>
<div><input type="text"></div>
</div>
... (more label/input pairs) ....
</div>
div { display:table }
div div { display:table-row }
div div div { display:table-cell }
It works well, except that I can't get the elements with the section
titles to span two rows - so the left column with the labels gets forced
to the maximum width of the titles.
I tried something like:
div div div.colspan { display:block }
Which did not seem to change anything.
The only solution that comes to my mind is to separate the table into 2,
and take the titles out of it. This means I will have to apply fixed
widths to the left column's elements. Is there something better?
Thanks for your comments!
Markus
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
