Rowspan and Colspan Problems in Ie

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.

Tables, rowspan and colspan

You need to add colspan for the last cell in the header and the last cell in the first row of the table body otherwise column sum will be only 3 for them(based on colspan).

<!DOCTYPE html><html>
<head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <style>    table,    td,    th {      border: 1px solid #666;      border-collapse: collapse;    }  </style>  <title>Assignment 4</title></head>
<body>  <table>    <tr>      <th colspan="2">Hi</th>      <th colspan="2">Hi</th>    </tr>    <tr>      <td>Hi</td>      <td>Hi</td>      <td colspan="2">hi</td>    </tr>    <tr>      <td>Hi</td>      <td>Hi</td>      <td>hi</td>      <td>hi</td>    </tr>  </table>

</body>
</html>

Rowspan and colspan problems in IE

Think of your layout as a 9 column grid where the content spans 1, 2 or 3 columns. Then use floats:

#grid {  width: 900px;  overflow: hidden;}#grid div {  float: left;}#grid .col-3-9 {  width: 33.33%;}#grid .col-2-9 {  width: 22.22%;}#grid .col-1-2 {  width: 50%;}#grid img {  display: block;  width: 100%;}

<div id="grid">  <div class="col-3-9">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg">  </div>  <div class="col-2-9">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg">  </div>  <div class="col-2-9">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg">  </div>  <div class="col-2-9">    <div class="col-1-2">      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg">    </div>    <div class="col-1-2">      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg">    </div>    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg">    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg">  </div></div>

Rowspan/colspan problem

The colspan should work. The rowspan is pointless here. The cell already covers the entire row. You cannot add another row to fill the remaining columns (because there are no remaining columns). You'd like to specify the height instead.

Here's the improved example:

<th colspan="2" style="height: 2em; background: #FCE14E;"> </th>

Note that I added a (non breaking space) because the cell would otherwise not render in MSIE browser. Also note that you should prefer using CSS classes above inline styles using style.

Why is colspan and rowspan not formatting correctly in this table?

You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.

Then add a width to th and td to maintain the correct styles, and you can hide the empty row to match your design.

table, th, td  {
  border: 1px solid black;
  border-collapse: collapse;
}

.title {
  padding: 10px;
}

th, td {
  width: 20%;
}

<h1>Table</h1>

<table>
  <tr>
    <th colspan="4" class="title">A common header for three subheads</th>
    <th rowspan="2">Header 3</th>
  </tr>
  <tr>
    <th>Header 1</th>
    <th colspan="3">Header 2</th>
  </tr>
  <tr>
    <th>Thing A</th>
    <td colspan="2">dataA1</td>
    <td>dataA2</td>
    <td>dataA3</td>
  </tr>
  <tr>
    <th>Thing B</th>
    <td colspan="2">dataB1</td>
    <td>dataB2</td>
    <td>dataC3</td>
  </tr>
  <tr>
    <th>Thing C</th>
    <td colspan="2">dataC1</td>
    <td>dataC2</td>
    <td>dataC3</td>
  </tr>
  <tr style="visibility: hidden;" aria-hidden="true">
    <th></th><td></td><td></td><td></td><td></td>
  </tr>
</table>

Complex HTML table with rowspans and colspans is broken

In this table, I had to leave an empty tag <tr></tr>, to create a row that will not allow your table to break.

table {
    width: 100%;
}

table tr {   
    height: 30px;
}

table td {
    border: 1px solid black;
    text-align: center;
}

<table>
    <tbody>
        <tr>
            <td rowspan="3">test text</td>
            <td colspan="2" rowspan="3">test text</td>
            <td>test text</td>
            <td>test text</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">test text</td>     
        </tr>
        <tr></tr>
        <tr>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td rowspan="2">test text</td>
            <td>test text</td>
        </tr>
        <tr>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
        </tr>
        <tr>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
        </tr>
    </tbody>
</table>

Complex table rowspan and colspan

Right now you are letting the browser interpret how wide and tall each cell in the table is going to be. You need to set the width and height attributes for each cell to fix your problems.

<table>
        <tr id="Row1">
            <td width="340">A
            </td>
            <td colspan="2" width="450">B
            </td>
            <td colspan="2" width="450">C
            </td>
        </tr>
        <tr id="Row2">
            <td width="340" height="100">
                <div style="width: 340px; height: 100px;" />
            </td>
            <td colspan="2" rowspan="3" width="450">
                <div style="width: 450px; height: 200px" />
            </td>
            <td colspan="2" rowspan="5" width="400">
                <div style="width: 400px; height: 100px" />
            </td>
        </tr>
        <tr id="Row3">
            <td>D
            </td>
        </tr>
        <tr id="Row4">
            <td rowspan="5" width="340">
                <div style="width: 340px; height: 100px;" />
            </td>
        </tr>
        <tr id="Row5">
            <td colspan="2" width="450">E
            </td>
        </tr>
        <tr id="Row6">
            <td colspan="2" width="450">
                <div style="width: 450px; height: 200px;" />
            </td>
        </tr>
        <tr id="Row7">
            <td>F
            </td>
            <td colspan="2">G
            </td>
            <td>H
            </td>
        </tr>
        <tr id="Row8">
            <td width="350">
                <div style="width: 350px; height: 100px" />
            </td>
            <td valign="top" colspan="2" width="200">
                <div style="width: 200px; height: 100px" />
            </td>
            <td valign="top" width="300">
                <div style="width: 300px; height: 100px" />
            </td>
        </tr>
    </table>

See updated fiddle.

Chrome table glitch when cells have rowspan and colspan

It sure sounds like chrome bug.

Have you considered using table-row-group?

thead { 
  display: table-row-group 
}

This will remove the repetition of table headers at page breaks.

Hope it helps, cheers!