SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting column width using CSS

    What is the best way to set the width of a table's columns individually using css? I thought this would work, but it didn't:

    Sample of the table code:
    Code:
            <table width="100%" class="zebra">
          <tr>
            <th class="image">IMAGE</th>
            <th class="name">NAME</th>
            <th class="name">GENDER</th>
            <th class="name">AGE</th>
            <th class="loc">LOC.</th>
            <th class="desc">DESCRIPTION</th>
            <th class="cont">CONTACT</th>
            <th class="image">ADDED</th>
            <th class="image">UPDATED</th>
          </tr>
          <tr>
            <td align="center"><img src="memdakotablank-wolfdog_adopt.jpg" width="65" height="65" alt=""></td>
            <td align="center">xxx</td>
            <td align="center">xxx</td>
            <td align="center">xxx</td>
            <td align="center">xxx</td>
            <td>xxx</td>
            <td align="center">xxx</td>
            <td align="center">xxx</td>
            <td align="center">xxx</td>
          </tr>
        </table>
    CSS:
    Code:
    table.zebra {
                 table-layout:fixed;
                 background-color:#f4ffe4;
    	margin-left: auto; 
    	margin-right: auto;
    	border-collapse:collapse;
                 }          
    table.zebra th { 
    	background-color: #D5EDB3;
    	font:bold .63em Arial, Helvetica, sans-serif;
    	color: #993300;
    	line-height:1.38em;
    	letter-spacing:.1em;
    	text-align:center;
    	padding:6px;
    	}
    table.zebra td { 
    	padding: 6px;
    	text-align:center;
    	font:.69em Arial, Helvetica, sans-serif;
    	letter-spacing:normal;
    	vertical-align:middle;
    	border-color: #f4ffe4;
                 border-width: 2px 2px 2px 2px;
                 border-style: solid
                 }
    table.zebra tr { 
    	background-color: #FFFFFF; 
                 }
    
    
    table.image th {
        width:65px;
    	}
    	
    table.name th {
        width:50px;
    	}
    	
    table.loc th {
        width:30px;
    	}
    	
    table.desc th {
        width:200px;
    	}
    	
    table.cont th {
        width:150px;
    	}
    Originally, I just had the width set in the html (<th width="65">IMAGE</th>) which worked fine to set the column width, but the html validator hated it.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the table head selectors should be like this:
    Code:
    th.image{
        width:65px;
    	}
    	
    th.name {
        width:50px;
    	}
    	
    th.loc {
        width:30px;
    	}
    	
    th.desc {
        width:200px;
    	}
    	
    th.cont {
        width:150px;
    	}
    Happy ADD/ADHD with Asperger's


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
  •