Question

I am trying to span background image over 2 table rows but this does not seem to work.

Html:

<table id="branchTable">
 <thead>
  <th align="center">Tel.</th>
  <th align="center">Fax</th>
  <td rowspan="2" id="branch-logo"> d</td>
 </thead>
 <tbody>
  <td align="center">${_branch?.tel}</td>
  <td align="center">${_branch?.fax}</td>
 </tbody>
</table>

css:

#branch-logo {
    background-image: url(/public/images/logo.png);
    height:53px;
    width:100px;
    background-repeat: no-repeat;
    background-position: left;
}

The image seems to be pushing the row down and not spanning accross.

UPDATE

<table id="branchTable">
 <tr id="thead">
  <th align="center">Tel.</th>
  <th align="center">Fax</th>
  <td rowspan="2" id="branch-logo"> d</td>
 </tr>
 <tr id="tbody">
  <td align="center">${_branch?.tel}</td>
  <td align="center">${_branch?.fax}</td>
 </tr>
</table>

rowspan does not seem to work between tbody and thead. Using tr does the trick.

Answer 1

You forgot your <tr>s in your table. That’s probably what causes it to misbehave.

And as Scott says, you use logo in your html and branch-logo in your css.

Edit: In addition, I’m not at all sure if all major browsers support rowspanning a cell over a thead and a tbody. That would take some testing.