IE table with multiple rowspan leads to extra white space in cells

Question

For a project I need to use tables. This is a simplified part of this project. It would be important for me to be able to build any type of table structures. My problem is, that IE in some cases adds some extra white space after and before the table cells.

In IE:

In Safari/Chrome/Firefox correct:

Thanks for your help! Balint

My code:

<table cellpadding="0" cellspacing="0" border="1" width="656px">
      <tr>
          <td rowspan="1" colspan="1">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
          <td rowspan="2" colspan="2">
              <table style="width: 328px; height: 40px;" bgcolor="#ffff99" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
          <td rowspan="1" colspan="1">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td rowspan="2" colspan="1">
              <table style="width: 164px; height: 40px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
          <td rowspan="2" colspan="1">
              <table style="width: 164px; height: 40px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td rowspan="2" colspan="2">
              <table style="width: 328px; height: 40px;" border="0" cellspacing="0" cellpadding="0"> 
                  <tr>
                      <td bgcolor="#ffff99" width="100%" height="100%">
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td bgcolor="#cccccc">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td>
                      </td>
                  </tr>
              </table>
          </td>
          <td bgcolor="#cccccc">
              <table style="width: 164px; height: 20px;" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td>
                      </td>
                  </tr>
               </table>
          </td>
      </tr>
  </table>

Answer 1

Internet Explorer handles tables in a variety sometimes no so good ways.

Use the F12 developer tools to determine what variation of IE you are using. You will probably want to force IE into it latest version. See HTML5 doctype putting IE9 into quirks mode? for more details