Best way to set Column Widths in Table?

HTML & CSS
1

What is the best way to set Column Widths in a Table using CSS?

Can I just set widths on the <th> in my Header Row and then the <td> in the regular rows below will follow suite?

Maybe like this…


		<thead>
			<tr id="tableHeader">
				<th scope="col" id="col1">
					Event<br />
					Name
				</th>
				<th scope="col" id="col2">
					Ticket<br />
					Price
				</th>
				<th scope="col" id="col3">
					# of<br />
					Attendees
				</th>
				<th scope="col" id="col4">
					<br />Total
				</th>
				<th scope="col" id="col5">
					Choose<br />
					One
				</th>
			</tr>
		</thead>

Debbie

2

Have you tried it? Tables will take width and height values as “suggestions”. The browser will try to honor them, but in the end the values will be treated as minimum height/widths. Since all cells in a given column are the same width, and all cells in a row the same height, setting the width value for one cell will control the width for the column. See §17 Tables.

cheers,

gary

3

Yes, but that doesn’t mean it is “right” or will always work…

Tables will take width and height values as “suggestions”. The browser will try to honor them, but in the end the values will be treated as minimum height/widths. Since all cells in a given column are the same width, and all cells in a row the same height, setting the width value for one cell will control the width for the column. See §17 Tables.

cheers,

gary

I didn’t know if that was true with <th>…

Debbie

4

By the way, is it a “Good” or “Bad” idea to set the width of Table Columns as “fixed-width” like this…


		#tableHeader #col1{
			width: 150px;
		}

I was thinking that using Padding would be better since that would make my Table design “fluid”, right?

Debbie

5

It’s neither good nor bad. It just is, and it doesn’t matter what the definition of is is. :wink:

A table will try to shrink-wrap its content. If the table’s width is set, it will try to equalized the cell widths, but bow to their content width. Were I you, I’d simply mark up the table with typical content, and decide what will best display that content.

cheers,

gary