Search code examples
javascripthtmlcssoutlook-2016

Rowspan HTML table in Outlook 2016 Rendering issue

I am using html table with Rowspan attribute to generate a table with different row size and column size. The issue I am having is the rendering in Outlook 2016 is showing an empty space whenever there is a an empty row. Anyone know the fix/workaround for this ? I tried using flexbox only to realize Outlook 2016 does not support this :(

Screenshot of the view in Outlook. enter image description here

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>
  table {
    border: 1px solid #000000;
  }
  td {
    border: 1px dotted #000000;
  }
  tr {
    border: 1px dotted #000000;
  }

  .head {
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    width: 200px;
    height: 20px;
    border-bottom: 1px solid #4c4c4c;
  }

  .tdHeading {
    min-width: 64px;
    background-color: #3f3a64;
    color: #ffffff;
  }
</style>

<table width="448" cellpadding="8" align="center" id="logtbl">
  <thead>
    <tr>
      <td class="head" colspan="2" rowspan="2" width="64" align="center">
        Testing
      </td>
      <td class="head" colspan="6" width="320">TBD</td>
    </tr>
    <tr>
      <td class="head" width="64">1</td>
      <td class="head" width="64">2</td>
      <td class="head" width="64">3</td>
      <td class="head" width="64">4</td>
      <td class="head" width="64">5</td>
      <td class="head" width="64">6</td>
    </tr>
  </thead>
  <tbody id="bodyID">
    <td rowspan="4">Cat1</td>
    <tr>
      <td>One</td>
      <td></td>
      <td></td>
      <td></td>
      <td bgcolor="red">
        Item
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Two</td>
    </tr>
    <tr>
      <td>Three</td>
    </tr>
    <td rowspan="3">Cat2</td>
    <tr>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
    </tr>  
  </tbody>
</table>

Solution

  • Your problem stems from your HTML being invalid. A td must always be enclosed within a tr and cells within a thead should be denoted with th, rather than td.

    Also, at the top, you are not spanning 4 rows, you are spanning 3. And, at the bottom, you are not spanning 3 rows, you are spanning 2.

    Specifically, this:

    <tbody id="bodyID">
<td rowspan="4">Cat1</td>  <!-- A cell must always be inside of a row -->
<tr>

    Should have been this:

    <tbody id="bodyID">
<tr>
  <td rowspan="3">Cat1</td> <!-- This solves the issue. -->
  <td>One</td>
  <td></td>
  <td></td>
  <td></td>
  <td class="bgRed">Item</td>
  <td></td>
  <td></td>
</tr>

    You had the same issue with the second td rowspan.

    Beyond that, you are using several deprecated table, row, and cell attributes for styling that should all be implemented via CSS.

    Putting it all together, we get this:

    table {
    border: 1px solid #000000;
    width:448px;  /* Instead of the deprecated width attribute. */
    margin:auto;  /* Instead of the deprecated align attribute. */
 }
 
 /* When multiple selectors need to be styled the same way
    just create one selector with the combinator (,) operator. */
 tr, td, th {
    border: 1px dotted #000000;
 }
 
 /* Instead of the deprecated width attribute: */
 .width64 { width:64px; }
 .width320 { width:320px; }
 
 /* Instead of the deprecated cellpadding attribute: */
 td, th { padding:8px; }

.head {
    font-size: 12px;
    vertical-align: middle;
    width: 200px;
    height: 20px;
    border-bottom: 1px solid #4c4c4c;
}
  
/* Instead of the deprecated bgcolor attribute: */
.bgRed { background-color:#f00;}
    <table id="logtbl">
  <thead>
    <tr>
      <!-- Within a <thead>, cells are denoted with <th>, rather than <td>
           <th> elements automatically get centered and bolded, so no need to manually style. -->
      <th class="head width64" colspan="2" rowspan="2">Testing</th>
      <th class="head width320" colspan="6">TBD</th>
    </tr>
    <tr>
      <th class="head">1</th>
      <th class="head">2</th>
      <th class="head">3</th>
      <th class="head">4</th>
      <th class="head">5</th>
      <th class="head">6</th>
    </tr>
  </thead>
  <tbody id="bodyID">
    <tr>
      <td rowspan="3">Cat1</td>
      <td>One</td>
      <td></td>
      <td></td>
      <td></td>
      <td class="bgRed">Item</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Two</td>
    </tr>
    <tr>
      <td>Three</td>
    </tr>
    <tr>
      <td rowspan="2">Cat2</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
    </tr>  
  </tbody>
</table>