3

如何在不扩展单元格的情况下强制图像在表格单元格中溢出？

编辑：

抱歉，我会提供更多信息。这是表格：

<table class="content">
    <col width="200px" />
    <col width="560px" />
    <col width="200px" />
    <tr>
        <td colspan="3" class="logo"></td>
    </tr>
</table>

CSS：

.logo
{
    height: 120px;
    background: url('img/wallpaper.png') center;
}

我以为会有一个简单的解决方案...

4

3 回答 3

4

如果您使用<img>标签而不是背景图像，则可以使用以下命令将其从文档流中删除position: absolute;

html

<td class="logo">
    <img src="img/wallpaper.png">
</td>

css

.logo img {
    position: absolute;
}

这将使图像溢出单元格，但会产生您需要处理的其他副作用。相应地更新顶部或底部以保持图像到位。

调整后的 css

.logo img {
    position: absolute;
    top: 15px;
}

查看http://jsfiddle.net/QMNRp/1/

于 2013-03-20T13:24:37.450 回答
1

你要求一个元素background逃到前台。这是不可能的。元素的背景只能与元素本身一样大。

要使.logo图像与包含单元格的尺寸相同，您可以使用background-sizeproperty，但这在旧浏览器中不受支持。

于 2013-03-20T13:13:48.477 回答
-1

将静态宽度设置为 td ，并为表格中的文本设置overflow为visible和text-wrap:nowrap;或word-breakkeep all

td{
width:100px;
max-width:100px;
overflow:visible
text-wrap:nowrap;  //for text
word-break:keep-all;  // for text
}
于 2013-03-20T13:04:03.900 回答