SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,828
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)

    Equal width across most columns

    I'm sure I ought to know the answer to this but I'm struggling...

    I have a table with a width of 100% of its parent. That bit is easy.

    The first column contains a list of names.
    The last column contains percentages to 1 decimal place.
    The 2030 intermediate columns contain just numbers.

    This is a template that will be used with a varying number of columns and varying contents, so it needs to be a flexible solution.

    I want the first and last columns to have sufficient width to accommodate their contents, but the intermediate columns to share the available width remaining equally. Unfortunately, because some columns might only contain single-digit numbers but others include two-digit or negative numbers, leaving the width alone means that the columns are not equally spaced.

    I'm sure I remember reading that there was a trick with width:*; but I can't find any documentation for it and it isn't working when I try applying it to the relevant <th> cells by using a class. Any suggestions?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    I don't think you can do this as described. There are TWO rendering modes for the TABLE element ( fixed/auto). One renders based on content the other sizes cells equally. Of course you can override the latter by giving the cell a defined width and the REMAINING cells will calculate based on dividing the remaining space equally. The problem is IF YOU dont want to DECLARE a fixed space to first and/or last columns, there is no "priority" mode when it comes to table rendering.

    see what I did here.. hopefully it will help ( I used CSS3 selectors cause I am lazy, but you can use class names for max cross browser compatibility)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    table{border:1px solid #000; border-collapse: separate; border-spacing:0; width:100%}
    td{border: 1px solid #ccc; border-bottom:none; border-right:none; padding:10px}
    tr:first-child td{border-top:none;}
    tr td:first-child{border-left:none; max-width:15em}
    tr td:last-child{width:2em;}
    		</style>
    	</head>
    	<body>
    		<table>
    				<tr>
    					<td>this is a name</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>1.55</td>
    				</tr>
    				<tr>
    					<td>this is a name</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>0.55</td>
    				</tr>
    				<tr>
    					<td>this is a name</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>1.05</td>
    				</tr>
    				<tr>
    					<td>another name</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>1.25</td>
    				</tr>
    				<tr>
    					<td>some name</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>1.15</td>
    				</tr>
    				<tr>
    					<td>name</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>#</td>
    					<td>1.00</td>
    				</tr>
    		</table>
    	</body>
    </html>


Bookmarks

Posting Permissions

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