...

View Full Version : Simulating an elastic table with a list and spans



PassiveSmoking
07-16-2007, 04:45 PM
I am rewriting a page that originally displayed a table to use an ordered list instead because it is more semancitally correct, and because I need to be able to use jQuery draggables with it and they don't play nice with table rows in Internet Explorer. I am using a h3 to serve as the header of the table followed by an ordered list where each li represents a row and each row is subdivided into columns with the use of spans. My CSS looks something like this:



ol.favourites {
margin: 0px;
padding: 1px;
list-style: none outside;
background: #CCCCCC;
}
ol.favourites li {
clear: both;
height: 42px;
}
ol.favourites li span {
margin-right: 1px;
margin-bottom: 1px;
background: #FFFFFF;
display: block;
float: left;
height: 100%;
}
ol.favourites li span.dragHandle {
background: blue;
cursor: n-resize;
}
h3.colTitles {
height: 1.2em;
margin-bottom: 0px;
border-top: solid 10px white;
clear: both;
}
h3.colTitles span {
background: #006699;
color: #FFFFFF;
font-weight: bold;
text-align: center;
margin-right: 1px;
margin-bottom: 1px;
display: block;
float: left;
height: 100%;
}
span.desc {
width: 380px;
}
span.stock {
width: 80px;
}
span.price {
width: 60px;
}
span.quantity {
width: 60px;
}


The HTML looks somewhat like this:



<h3 class="colTitles">
<span class="price">Price</span>
<span class="desc">Description</span>
<span class="quantity">Quantity</span>
<span class="stock">Stock</span>
</h3>
<ol class="favourites">
<li>
<span class="price">1</span>
<span class="desc">Description 1</span>
<span class="quantity">1</span>
<span class="stock">1</span>
</li>
<li>
<span class="price">2</span>
<span class="desc">Description 2</span>
<span class="quantity">2</span>
<span class="stock">2</span>
</li>
<li>
<span class="price">3</span>
<span class="desc">Description 3</span>
<span class="quantity">3</span>
<span class="stock">3</span>
</li>
</ol>


The problem I am having with this approach is that I need the description cell to be elastic. That is, I need for the list to take up a certain width in the browser window, say 80%. The other fields have predictable content and can have fixed widths, but the description column really needs to be able to resize so that it takes up any remaining space in the row. As they are columns in a table, the description spans all need to have a uniform height. With a table you'd specify a width for the entire table, then specify widths for all the columns you wanted to have fixed widths, and omit a width for any column you wanted to be elastic.

Is there a way of doing this in HTML/CSS?

Pennimus
07-16-2007, 05:41 PM
A table is the correct way to display tabular data... looks like you're making things more difficult than they need to be by trying to use lists and spans. If I were you I would try and find a workaround for the jQuery thing instead.

PassiveSmoking
07-17-2007, 08:31 AM
I have tried asking on the jQuery google group but nobody seemed to have any ideas regarding it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum