CODEWITHSUNDEEP
htmlwidthhtml-table
HiddenMonk
HiddenMonk

Reputation: 35

Html <td> width issue. Is it related to colspan? How?

My <td> width seems to be ignored for some reason related to the tabledatas above it since if I remove all rows except the row that seems to be having the issue, it then works fine.

I am thinking it has something to do with the colspans.
I saw this answer colspan width issue which talks about how you basically need to imagine there are invisible cells in your table, but I was already doing that, but maybe I am doing it wrong?

Here is the html

<table border="1" cellspacing="0" cellpadding="0" width="600">
    <tr>
        <td id="IX991PI1" rowspan="1" colspan="3" width="412" height="81" ></td>
        <td id="OW6DMR2F" rowspan="1" colspan="1" width="188" height="81" ></td>
    </tr>
    <tr>
        <td id="RU5UW85Z" rowspan="1" colspan="3" width="412" height="66" ></td>
        <td id="RGPQDOYK" rowspan="2" colspan="1" width="188" height="204" ></td>
    </tr>
    <tr>
        <td id="67JXVSFB" rowspan="1" colspan="3" width="412" height="138" ></td>
    </tr>

    <tr>
        <td id="AB6FD7D5" rowspan="1" colspan="1" width="145" height="67" ></td>
        <td id="RU0G6BL8" rowspan="1" colspan="3" width="455" height="67" ></td>
    </tr>
    <tr>
        <td id="0B0D4ZVN" rowspan="1" colspan="4" width="600" height="29" ></td>
    </tr>

    <!-- the problematic row -->
    <tr>
        <td id="V4GHN5BW" rowspan="1" colspan="2" width="242" height="100" ></td>
        <td id="CK3PB3OT" rowspan="1" colspan="2" width="358" height="100" ></td>
    </tr>
</table>

Here is an image of the table as it is wrong and how it should look

Html Table Image

As far as I can see, all widths add up to 600, and all colspans have the right amount keeping the invisible cells in mind (total of 4 cols). In fact, the problematic row is what's making there be 4 cols, so I would expect it to have full control on where that invisible line goes that cuts all the above and below rows.

I can't think of anything else that could be causing the issue other than the colspans, so I must be doing something wrong.

Edit- Also, this is for emails, so I am limited on css and such...

Edit- I was using google chrome and after trying it on firefox there seems to be no issue?
However, I then added more rows to the table to see if something won't work in both browsers, and I have quickly ran into that problem.

The bottom 4 rows are where the problems start (the first is the problematic row from above). Even putting those rows into their own table still has issues.

<table border="1" cellspacing="0" cellpadding="0" width="600" >
    <tr>
        <td id="5DPKU34O" rowspan="1" colspan="4" width="412" height="81" ></td>
        <td id="XHK07WYR" rowspan="1" colspan="1" width="188" height="81" ></td>
    </tr>
    <tr>
        <td id="5IP7MCTF" rowspan="1" colspan="4" width="412" height="66" ></td>
        <td id="WO4JPVJ6" rowspan="2" colspan="1" width="188" height="204" ></td>
    </tr>
    <tr>
        <td id="JLCGN4YY" rowspan="1" colspan="4" width="412" height="138" ></td>
    </tr>
    <tr>
        <td id="RX6Q81VD" rowspan="1" colspan="1" width="145" height="67" ></td>
        <td id="6YNA6379" rowspan="1" colspan="4" width="455" height="67" ></td>
    </tr>
    <tr>
        <td id="4DIOQA09" rowspan="1" colspan="5" width="600" height="29" ></td>
    </tr>

    <!-- problem starts here -->
    <tr>
        <td id="0X3RX651" rowspan="1" colspan="2" width="242" height="50" ></td>
        <td id="L1TLGZIX" rowspan="2" colspan="3" width="358" height="220" ></td>
    </tr>
    <tr>
        <td id="U1BAFJFK" rowspan="1" colspan="2" width="242" height="170" ></td>
    </tr>
    <tr>
        <td id="VPM6G120" rowspan="1" colspan="3" width="380" height="192" ></td>
        <td id="LF6WV55J" rowspan="1" colspan="2" width="220" height="192" ></td>
    </tr>
    <tr>
        <td id="DW95YX3T" rowspan="1" colspan="5" width="600" height="16" ></td>
    </tr>
</table>

Here is an image illustrating the issue in Firefox and Chrome. Html Table Image

Upvotes: 2

Views: 7947

Answers (2)

Mr Lister
Mr Lister

Reputation: 46629

To set the widths of table columns that have colspans, the most reliable method is to set the width for each column explicitly using <col> elements.
That way, the browser will know from the start which column has which width, and also how many columns there actually are!

This method also has the advantage that you won't need to specify the width in each and every table cell, so it's more efficient in terms of bytes, and less error-prone in terms of typos.

<table border="1" cellspacing="0" cellpadding="0">
  <col width="145"><col width="97"><col width="170"><col width="188">
  <tr>
    <td id="IX991PI1" colspan="3" height="81"></td>
    <td id="OW6DMR2F" height="81"></td>
  </tr>
  <tr>
    <td id="RU5UW85Z" colspan="3" height="66"></td>
    <td id="RGPQDOYK" rowspan="2" height="204"></td>
  </tr>
  <tr>
    <td id="67JXVSFB" colspan="3" height="138"></td>
  </tr>

  <tr>
    <td id="AB6FD7D5" height="67"></td>
    <td id="RU0G6BL8" colspan="3" height="67"></td>
  </tr>
  <tr>
    <td id="0B0D4ZVN" colspan="4" height="29"></td>
  </tr>

  <!-- the no longer problematic row -->
  <tr>
    <td id="V4GHN5BW" colspan="2" height="100"></td>
    <td id="CK3PB3OT" colspan="2" height="100"></td>
  </tr>
</table>

I also took the liberty of removing all colspan=1 and rowspan=1 attributes, since those are not necessary. And the width attribute on the table itself was also superfluous.

Tested in Chrome and Mozilla, and it looks good in Thunderbird too.

Upvotes: 3

user6176718
user6176718

Reputation: 1

Try to remove the width in your td in row problematic tag. This sets the maximum width for its child.

<!-- the problematic row -->
    <tr>
        <td id="V4GHN5BW" rowspan="1" colspan="2" height="100" ></td>
        <td id="CK3PB3OT" rowspan="1" colspan="2" height="100" ></td>
    </tr>

Upvotes: 0

Related Questions