如何強制圖像在表格單元格中溢出而不展開單元格？強制圖像在表格單元格中溢出

編輯：

對不起，我會提供一些更多的信息。這是表：

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

我以爲會有一個簡單的解決方案...

來源

2013-03-20 Stylock

*非常低質量：*你嘗試過什麼？你的代碼在哪裏？ – 2013-03-20 12:57:53

嗯，我試着用表格來嵌套表格，但是我想知道如何強制圖片溢出。 – Stylock 2013-03-20 13:15:21

如果使用<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-20 13:24:37 xec

這很好用，但是它創建了x-scroll，我不需要它。我實際上意識到我可能需要將徽標圖像附加到身體壁紙。我試圖在x方向上擴展徽標圖像而不創建x-scroll等。 – Stylock 2013-03-20 13:53:13

-1

設置靜態寬度運輸署的，並設置overflow到visible和text-wrap:nowrap;或word-break到keep all表格中的文字

td{ 
width:100px; 
max-width:100px; 
overflow:visible 
text-wrap:nowrap; //for text 
word-break:keep-all; // for text 
}

來源

2013-03-20 13:04:03

@xec請檢查答案的時間與問題的編輯。回答下面的問題，因爲它不再適用於**問題編輯後**是非常不公平的。 – 2013-03-20 13:14:33

@JamesDonnelly你是對的，我會刪除downvote，除了這個答案無助於防止表格單元拉伸，背景圖像或其他。 – xec 2013-03-20 13:18:20

@xec僅供參考本* *將適用於溢出寬度，但不適用於高度：http://jsfiddle.net/erKGm/ – 2013-03-20 13:25:50

您正在要求元素的background轉義到前景。這是不可能的。元素的背景只能和元素本身一樣大。

要使.logo圖像具有與包含單元格相同的尺寸，您可以在舊版瀏覽器中使用background-size property，但使用isn't supported。

來源

2013-03-20 13:13:48

強制圖像在表格單元格中溢出

編輯：

回答

相關問題