Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Simulating an elastic table with a list and spans

    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:

    Code:
    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:

    Code:
    <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?
    Last edited by PassiveSmoking; 07-16-2007 at 04:38 PM. Reason: more descriptive title

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    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.

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried asking on the jQuery google group but nobody seemed to have any ideas regarding it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •