emt14 emt14 - 1 month ago 8
HTML Question

How to span image over 2 table rows?

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

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.

Comments