Can I set the width of table cell columns using em?

Hello;

I am trying to figure out the best way to set the width of table cell. Below is the style sheet and a table row from a baseball game schedule.

I want to get the score columns as close as possible. If I set the width at 5px each they will be close together but the number 10 will have to expand the column wider than 5px in order to fit.

Questions: If I have got two digits or letters in a column and I am setting the font size with em -

1). Is there a way to calculate how wide the letters will be and then equate that width to pixels?

2). What is the best way to set the column width for two letters or digits if I am setting the font size with em?

I am looking at the w3schools web site where it tells about the em and width settings using css. I can’t find anywhere there where it tells about what I need to do.

style sheet:


body
{
font-size:100%;
}

td.one
{
font-size: .90em;
width: 75px;
white-space:nowrap;
}
td.two
{
font-size: .90em;
width: 20px;
}
td.three
{
font-size: .90em;
width: 5px;
}
td.four
{
font-size: .90em;
width: 20px;
}

Table row for baseball score. The score is 8-10.

<tr>
<td class="one">Lake County Sluggers</td>
<td class="two">8</td>
<td class="three">-</td>
<td class="four">10</td>
</tr>


Thanks.

Do you need to be that accurate?

I would just let the table sort itself.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {font-size:100%}
td{
	border:1px solid #000;
	font-size: .90em;
	padding:2px 5px
}
td.one{white-space:nowrap}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="0">
		<tr>
				<td class="one">Lake County Sluggers</td>
				<td class="two">8</td>
				<td class="three">-</td>
				<td class="four">10</td>
		</tr>
</table>
</body>
</html>

No need for any widths unless you have a table of fixed width to start with.

Paul;

Thanks for responding to my question.

The table is for a baseball schedule. There are going to be about fifty games per season. There are going to be several teams. Each team is going to have a table for their schedule.

The table is going to have more than just the columns I stated above. I stated just four columns in order to make my question simple.

There are also going to be columns for game date, extra innings, footnotes, and home/away. The table is going to have to be fixed width. I am just trying to figure out the best or proper way to set the column widths so the schedules table will work well with as many browsers as possible.

Hi,

Again the best answer is not to do anything special and let the table handle it. The columns will align with the data in the best way that it can and will work whatever size the user may have set for their text.

If one column needs to be a certain width then you can apply a width to that one and let the others sort themselves out. Widths on table cells are only advisory anyway and the browsers will over-rule them if things don’t fit unless you use table{table-layout:fixed} but then you run the risk of data not fitting if it gets too large.

The best thing to do is to post the whole table html with three or 4 lines of data so that we can see what you’ve got and what the issues will be. Specify what width the table is and put enough data so that we can see what the differences between rows may be. It’s not until you get data into the table that you can decide how best to style it. More often than not doing nothing is the best approach.

Paul;

Good idea about using as few widths as possible.

Thanks again.