- From: Adam van den Hoven <list@adamvandenhoven.com>
- Date: Tue, 27 Aug 2002 21:34:44 -0700
- To: <www-style@w3c.org>
- Message-ID: <2CFBE0D9CD992F41BE13069173C5C1C9019927@c2kxch.cucbc.com>
I've been looking at using display:table-* to achieve certain layout requirements and I've stumbled onto a problem. The spec says that table-column doesn't display but it should be useful because it will contain attributes that will affect the table. However, it doesn't say what those attributes are. The spec also implies that if you have a colspan attribute on an element with display:table-cell you will do a colspan. My problem is that this doesn't really seem to work for me. I have the following: <form> <div class="instructions"><p>some instructions</p></div> <div class="entry"><label>This is a field</label><input type="text" /></div> <div class="entry"><label>This is a field</label><input type="text" /></div> <div class="entry"><label>This is a field</label><input type="text" /></div> <div class="entry"><label>This is a field</label><input type="text" /></div> <div class="entry"><label>This is a field</label><input type="text" /></div> <div class="submit"><button>Continue</button><button>Cancel</button></div> </form> The css I wan to put in there is: form{ display:table; } form .instructions{ display:table-row; width:auto; } form div.required{ display:table-row; } form div.required label{ display:table-cell; font-weight:bolder; width:180px; } form div.required input { display:table-cell; width:auto; } form div.required .input { width:auto; display:table-cell; } form div.required .input input{ width:auto; display:inline; } form div.required .input label{ display:inline; width:auto; } However, this causes problems for me with the instruction block (which will almost always cover several lines). It is only ever one cell wide. I need it to span two cells. However, I can't add a colspan to my div since its not valid HTML. I can't find any way to set the colspan in css. I also can't figure out how you would say which argument should be used for colspan (a real problem if your valid XML doesn't include the colspan). I'm also not sure how to handle the <div class="submit"> which I want to be in line with the form fields. Could you do the following: form div.submit{ display:table-row; } form div.submit button:first-child:before{ display:table-cell; content:""; } or perhaps form div.submit{ display:table-cell; } form div.submit:before{ display:table-cell; content:""; } Any ideas? H. Adam van den Hoven Web Developer Credit Union Central of BC p 604 7306380 e avandenhoven@cucbc.com
Received on Wednesday, 28 August 2002 00:36:34 UTC