• Home
  • About
  • Resume

HTML Table RowSpan: Autofit spanned cells to content

By , 06/13/2012 2:58 PM

Let’s say you have created an HTML table with following markup:

<table id="xMyTable" style="width:100%;">
   <tr >
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:red; height: 100px;">
         </div>
      </td>
      <td style="vertical-align:top" rowspan="3">
         <div style="border: 2px solid black; background-color:orange; height: 600px">
         </div>
      </td>
   </tr>
   <tr>
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:green; height: 100px">
         </div>
      </td>
   </tr>
   <tr>
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:blue; height: 100px">
         </div>
      </td>
   </tr>
</table>

It’s very basic, one rowspanned cell that holds a content with large height on the right and 3 corresponding cells with content of smaller height on the left. You’d expect it to look like this:

Desired layout of rowspanned HTML table

Unfortunately as is it works only in Google Chrome. In the rest of the browsers, including Interned Explorer and famed FireFox it looks like this:

Current layout of rowspanned HTML table

What happens is browsers automatically spread spanned cells height to evenly fit height of the cell with rowspan. To rectify this situation we need a little help from JavaScript. Continue reading 'HTML Table RowSpan: Autofit spanned cells to content'»

Panorama Theme by Themocracy