By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,491 Members | 1,209 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,491 IT Pros & Developers. It's quick & easy.

Table column widths vs. Cell padding

P: n/a
I seem to having a little trouble getting a table to display correctly
in both msie and firefox. I want to set the table and column widths in
pixels, and have some cell padding too. The table displays correctly
in standards compiance mode in firefox, but not msie, where the
padding is added on to the column widths.
the table size is always correct, but the column widths are not what I
expect them to be.

If I change the column widths to be smaller by the padding x 2, the
table displays correctkly in msie, but not in firefox :(

Which browser is actually conforming to the CSS2 spec?

Does anyone know a proper fix for this? (preferably no css hacks)

The code is below:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
table { font-family: Arial; font-size: 10px }
#testtable { width: 400px; table-layout: fixed;
border-collapse: collapse }
#testtable td { overflow: hidden; border: 1px solid black;
margin: 5px }
#testtable col#col1 { width: 40px }
#testtable col#col2 { width: 60px }
#testtable col#col3 { width: 140x }
#testtable col#col4 { width: 160px }
-->
</style>
</head>
<body>
<table id='testtable'>
<col id="col1"><col id="col2"><col id="col3"><col id="col4">
<tbody>
<tr>
<td>0123456789012345678901234567890123456789</td>
<td>A</td>
<td>1.00%</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>A1</td>
<td>2.00%</td>
<td>C1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>4.00%</td>
<td>C2</td>
</tr>
<tr>
<td>1</td>
<td>A1</td>
<td>8.00%</td>
<td>C1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>16.00%</td>
<td>C2</td>
</tr>
<tr>
<td>1</td>
<td>A1</td>
<td>32.00%</td>
<td>C1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>64.00%</td>
<td>C2</td>
</tr>
<tr>
<td>1</td>
<td>A1</td>
<td>128.00%</td>
<td>C1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>256.00%</td>
<td>C2</td>
</tr>
</tbody>
</table>
</body>
</html>

cheers,
Steve
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Steve Sabljak wrote:

<snip>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
table { font-family: Arial; font-size: 10px }
#testtable { width: 400px; table-layout: fixed;
border-collapse: collapse }
#testtable td { overflow: hidden; border: 1px solid black;
margin: 5px }
#testtable col#col1 { width: 40px }
#testtable col#col2 { width: 60px }
#testtable col#col3 { width: 140x }


I don't use the <col> element, but I have noticed the above mistake. I'm
quite interested in whether that will fix the problem or not.

Paul
Jul 20 '05 #2

P: n/a
DU
Steve Sabljak wrote:
I seem to having a little trouble getting a table to display correctly
in both msie and firefox. I want to set the table and column widths in
pixels, and have some cell padding too. The table displays correctly
in standards compiance mode in firefox, but not msie, where the
padding is added on to the column widths.
the table size is always correct, but the column widths are not what I
expect them to be.

If I change the column widths to be smaller by the padding x 2, the
table displays correctkly in msie, but not in firefox :(

Did you check the specs on all this to begin with?
Just today, I filed a bug related to this precise issue.

"If column widths prove to be too narrow for the contents of a
particular table cell, user agents may choose to reflow the table."
http://www.w3.org/TR/html401/struct/...tml#h-11.2.4.4

"If a table or given column has a fixed width, cellspacing and
cellpadding may demand more space than assigned. User agents may give
these attributes precedence over the width attribute when a conflict
occurs, but are not required to."
http://www.w3.org/TR/html401/struct/....html#h-11.3.3
Which browser is actually conforming to the CSS2 spec?

Does anyone know a proper fix for this? (preferably no css hacks)

The code is below:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
table { font-family: Arial; font-size: 10px }
#testtable { width: 400px; table-layout: fixed;
border-collapse: collapse }
Why do you absolutely need to set a width to the table? I'm just asking
this because setting an abs. width to a table is usually the start of a
very common problem found in webpages which is called "over-constrained
table"
#testtable td { overflow: hidden; border: 1px solid black;
margin: 5px }
#testtable col#col1 { width: 40px }
#testtable col#col2 { width: 60px }
#testtable col#col3 { width: 140x }
#testtable col#col4 { width: 160px }
-->
</style>
</head>
<body>
<table id='testtable'>
<col id="col1"><col id="col2"><col id="col3"><col id="col4">
<tbody>
<tr>
<td>0123456789012345678901234567890123456789</td>


Is this realistic? No blank space in a 40 character word? and you're
allowing only 40 px. You're the one creating the problem on purpose, it
seems. I ddon't understand your post anymore.

DU
Jul 20 '05 #3

P: n/a
Paul <pa***********@blueyonder.couk> wrote in message news:<qI*******************@fe1.news.blueyonder.co .uk>...
Steve Sabljak wrote:

<snip>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
table { font-family: Arial; font-size: 10px }
#testtable { width: 400px; table-layout: fixed;
border-collapse: collapse }
#testtable td { overflow: hidden; border: 1px solid black;
margin: 5px }
#testtable col#col1 { width: 40px }
#testtable col#col2 { width: 60px }
#testtable col#col3 { width: 140x }


I don't use the <col> element, but I have noticed the above mistake. I'm
quite interested in whether that will fix the problem or not.

Paul


Oops!! I meant 'padding: 5px', not 'margin: 5px'

-Steve
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.