Firefox 3 not honouring colspan

Hi,

I have a problem with FF 3 not correctly honouring COLSPAN for TD elements in a TABLE.

Check out the HTML code below.

Five TD cells have a total colspan of 160.

In IE 8, each TD is rendered to have its width as a fraction of its COLSPAN/160…which is lovely.

In FF 3, I get five cells all of equal width…which is pants.

style=“table-layout: fixed”, does fix the problem…but I don’t want to use that…but that’s a different story.


<html>
  <head>
  <body >
  <table  class="table" cellspacing="2" cellpadding="1" width="100%" border="1">
     <tr >
        <td height="20" colspan="2" >
        &nbsp;
        </td>
        <td height="20" colspan="20" >
        &nbsp;
        </td>
        <td height="20" colspan="2" >
        &nbsp;
        </td>
        <td height="20" colspan="14" >
        &nbsp;
        </td>
        <td height="20" colspan="122" >
        &nbsp;
        </td>
     </tr>      
  </table>
</body>
</html>

Cheers,

Simon

Actually its the other way around. IE is not correctly rendering the mark-up as its written.

colspan means just that - “span columns”. The mark-up as shown has only 1 row of 5 columns. Hence there is nothing to span. For it to be correct, each row needs a sum total of 160 cells (i.e. columns).

Hi Mittineague,

Thanks for your feedback.

I understand your point that with only five cells, there is a disconnect with the total of 160 columns

However, since the table-layout is not fixed and there is no width setting, I think it would be reasonable of Firefox to make a stab at rendering cell width based on the relative COLSPAN of each TD compared with the total in the row.

I submitted a Firefox bug to Mozilla.

See Bug 609720 “FF does not accurately render a TD cell’s width based on its COLSPAN.” See, (https://bugzilla.mozilla.org/show_bug.cgi?id=609720)

Cheers,

Simon

I think you may be trying to misuse a property. AFAIK colspan is not meant to control width, width is. This shouldn’t be inline CSS of course, but it works in Firefox

<html>
  <head>
  <body >
  <table  cellspacing="2" cellpadding="1" width="100%" border="1">
     <tr>
        <td height="20" colspan="2" width="20%" >
        &nbsp;
        </td>
        <td height="20" colspan="8" width="80%" >
        &nbsp;
        </td>
     </tr> 
     <tr>
        <td height="20" colspan="8" width="80%" >
        &nbsp;
        </td>
        <td height="20" colspan="2" width="20%" >
        &nbsp;
        </td>
     </tr> 
     <tr>
        <td height="20" colspan="2" >
        &nbsp;
        </td>
        <td height="20" colspan="3" >
        &nbsp;
        </td>
        <td height="20" colspan="4" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
     </tr> 
     <tr>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
        <td height="20" >
        &nbsp;
        </td>
     </tr> 
  </table>
</body>
</html>

Hi,

I agree, COLSPAN is being mangled to do something that it is not ideally designed for.

We have some backwards compatibility issues to accommodate.

I had experimented with width (%), but I was not getting good results, unless I used table-layout: fixed, which was not good because that would not stretch cells where a SELECT (drop-down llist), which is what we wanted.

However, I see that COLSPAN AND width (%) renders quite nicely.

Thanks for the hint.

Cheers,

Simon

So you’d need at least one row in the table that has 160 <td> tags in it in order for the code to work correctly across all browsers. Without that it will not know what width each of the 160 columns needs to be.

Hi Stephen,

I am just saying it would be better if IE and Ff said:

“hey here’s a row with some TD’s. I will calculate the width of each on that row as a fraction of the colspan for the td divided by the total colspan of all the td’s in the row…it’s no trouble”.

E.g. Two td’s colspan of 2 and 8…hey nonny nonny…one is 20% of the width of the row and one is 80%.

Cheers,

Simon

The columns of a table can all be different widths. Unless you actually assign specific widths to specific columns the browser is allowed to allocate whatever width it need to each column just so long as they all fit within whatever width you specified for the table. So with a table width of 160 and 160 columns it can choose between

all width 1
one width 160 and the rest width 0
two that have widths that total to 160 with the rest 0
or any other combination that adds to the full width.

Unless you explicitly set column widths the browsers are supposed to assume that you don’t care which option that they choose as long as the total fits.

colspan simply indicates how many columns in the other rows of the table this particular element should span It is the other rows that it spans that determine the width of the individual columns and thus how wide this spanning element will be.

What you are suggesting is like suggesting that the browsers should have assigned the widths you wanted because you set the background colour to green and that they should have only set it the way they did if the background was blue. colspan has nothing more to do with the width of elements than the background colour does.

Anyway there are thousands of browsers apart from the two you mention and they probably all do things differently too when you don’t specify the widths of individual columns.

Hi Stephen,

First let me say I appreciate your time and trouble in contributing to this thread.

Let’s agree to disagree.

I suspect you will maintain your position.

I’ll maintain my position that, in lieu of any other width specification, a possible improvement to the table cell width rendering algorithm would be to give each cell a width equal to it’s COLSPAN as a ratio of the total of all COLSPAN values on the row in which the TD appears.

I conceded that introducing background colour as part of the width divining algorithm is probably not desirable :wink:

Cheers,

Simon

Neither is introducing the even less relevant colspan as a way of specifying width.

Background colour has just as much to do with the width as colspan does - they are three completely unrelated things (except that background colour and width are more closely related because they both relate to appearance where colspan relates only to content)…

In the absence of a width specification or content a browser is allowed to make a column any witdth it wants (including zero). If you want a column to have a width then give it a width.

Your wishing that the HTML specification was different to the way it actually is will not make iit any different. The browsers ARE obeying the specification in choosing the width themselves when you don’t specify one.