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-size

于 2013-03-20T13:13:48.477 に答える
-1

静的幅をtdに設定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-20T13:04:03.900 に答える