473,289 Members | 1,917 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

Table column widths vs. Cell padding

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
3 10692
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: MattB | last post by:
Hello please help, I have a table cell with a div in it. The div has a width of 300px. but when it is rendered it puts extra space into the table cell. Here's the style <style>...
3
by: Grytpype-Thynne | last post by:
Hello, Is it possible to align a column in a table so that units, tens and hundreds (some may not go to hundreds) align correctly yet are in the center of the table cell? I can get them to line...
0
by: TJ Talluto | last post by:
<facts> I have a "month calendar" that always displays exactly 42 days... and alongside is a vertical box that displays the detail (form fields) of any particular select event that appears on the...
4
by: N. Demos | last post by:
The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells...
1
by: Jeronimo Bertran | last post by:
I am creating a table and inserting an iframe inside a cell for which the width depends on the screen size. The table has 7 columns and the fourth column is resized depeding on the screen...
18
by: chimalus | last post by:
I am using a table with no column widths specified, letting the table layout manager do its thing for figuring out the column widths, and this works just fine. Now I want to make the table...
117
by: phil-news-nospam | last post by:
Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...
1
by: jamesm6162 | last post by:
Hi I have the following XSL-FO document that I'm testing with the FOP processor. The table I put in, however, is completely stuck to the left side of the body-region, regardless of which margins...
5
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.