如何跨越 2 个表格行的图像？答案

【问题标题】：How to span image over 2 table rows?如何跨越 2 个表格行的图像？
【发布时间】：2012-02-27 04:59:19
【问题描述】：

我正在尝试将背景图像跨越 2 个表格行，但这似乎不起作用。

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;
}

图像似乎将行向下推，而不是跨越。

更新

<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 似乎在 tbody 和 thead 之间不起作用。使用 tr 就可以了。

【问题讨论】：

我在您发布的 html 中的任何地方都看不到 #branch-logo。你的桌子有 1 行。事实上，由于 HTML 格式错误，它实际上没有任何行。
好指针，愚蠢的错误......

标签： html html-table

【解决方案1】：

您在表中忘记了您的<tr>s。这可能是导致它行为不端的原因。

正如 Scott 所说，您在 html 中使用 logo，在 css 中使用 branch-logo。

编辑：此外，我完全不确定是否所有主流浏览器都支持跨单元格在thead 和tbody 上的行跨度。这需要一些测试。

【讨论】：