Internet Explorer 8 Table Cell Width Bug with Colspan Set

Internet Explorer 8 table cell width bug with colspan set

Here is my result for failed td width in IE8:

<table style="width: 100%;" border="1">
  <tr>
    <td style="width:auto;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

<!-- IE8 HACK  100% WIDTH -->
<table style="width: 100%;" border="1">
  <tr>
    <td style="width:100%;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

Varied colspan width bug

I could be wrong, but even in a colgroup I'm pretty sure a width of * is invalid. I've only heard of using the star-sizes with a preceeding number.

Have you tried a more "standard" way of doing this by defining a header row with fixed widths, and leaving the width off the central column? So long as the table's width is 100% or at the very least dynamic past the point of the fixed width columns, it should span the remainder.

After discussion and playing around, JS seems to be the best solution:

<table id="test" cellpadding="0">
    <tr><td style="width: 20px"></td><td style="width: 20px"></td><td></td><td style="width: 20px"></td></tr>
    <tr>
        <td colspan="3">Top-level element</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr> 
        <td>+</td>
        <td colspan="2">Mid-level element</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td> </td>
        <td>+</td>
        <td>Bottom</td>
        <td><input type="checkbox" /></td>
    </tr>
</table>
<script type="text/javascript">
    alert("Setting to: " + document.getElementById('test').clientWidth);
    document.getElementById('test').style.width = document.getElementById('test').clientWidth + 'px';
    document.getElementById('test').style.tableLayout = 'fixed';
</script>

Why does Internet Explorer 9/10 ignore column widths when using colspan?

It seems that IE gets confused with the table structure when you have display: none on the last row. If you remove that setting, the widths change. Without that row, the table violates the HTML table model (as the validator reports, if you actually remove the row from the markup and tell the validator to do HTML5 validation, where table model errors are detected).

Things change if you replace display: none by visibility: collapse, though that setting is not supported by some old versions of IE.

Foremost, I think the table structure should be correct when visible rows only are counted.

colspan width issue

Because your column widths are contradicting. In row 1 you have columns widths 20, 50/2; in row 2 you have column widths 50/2, 20.

Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.

You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table:

|-----|----------|
|----------|-----|

Which is not valid since the columns don't line up. In order to do this you need to add more columns:

|-----|----.-----|
|-----.----|-----|

Where "." is a column that is hidden by the column span. Try this HTML:

<!DOCTYPE HTML>

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <table border="1" style="table-layout: fixed;">
            <colgroup>
                <col style="width: 20px;"/>
                <col style="width: 30px;"/>
                <col style="width: 20px;"/>
            </colgroup>
            <tbody>
                <tr>
                    <td>20</td>
                    <td colspan="2">50</td>
                </tr>
                <tr>
                    <td colspan="2">50</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

How to fix Microsoft Edge displaying incorrect table cell widths when child element with defined width is within a cell with a colspan?

just add table-layout:fixed

fixed

Table and column widths are set by the widths of table and col
elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.

Under the "fixed" layout method, the entire table can be rendered once
the first table row has been downloaded and analyzed. This can speed
up rendering time over the "automatic" layout method, but subsequent
cell content may not fit in the column widths provided. Any cell that
has content that overflows uses the overflow property to determine
whether to clip the overflow content.

.wrap {  width: 500px}.table {  width: 100%;  table-layout: fixed}.cell1 {  background: blue;  width: 60%}.cell2 {  background: red;  width: 40%}.cell3 {  background: yellow;  width: 100%}.cell3 div {  width: 400px}

<div class="wrap">  <table class="table">    <tr>      <td class="cell1">Some text for 1st cell</td>      <td class="cell2"></td>    </tr>    <tr>      <td colspan="2" class="cell3">        <div>          test        </div>      </td>    </tr>  </table></div>

Html ColSpan/RowSpan not working as expected

Do you really need to use tables here? Is it used for an email newsletter?
You can use divs with display: inline-block; to get the desired result without a table.

If you really need to take this way (not recommended), this is your solution:

http://jsfiddle.net/rcdmk/22o07mbt/1/

td {
    width: 132px;
}

If you place a border on the TD tags you will see what's happening there. The cells (columns) doesn't have specific widths so the browser have to guess based on the content and this is not a consistent behavior between browsers. You will have to just give a width to the cells.

Internet Explorer 8 Table Cell Width Bug with Colspan Set