Setting column width using CSS

HTML & CSS
1

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:


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


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

I think the table head selectors should be like this: :slight_smile:


th.image{
    width:65px;
	}
	
th.name {
    width:50px;
	}
	
th.loc {
    width:30px;
	}
	
th.desc {
    width:200px;
	}
	
th.cont {
    width:150px;
	}