2 
table 
{
    margin: 0 auto;
    border-collapse: collapse;
}

thead 
{
    background: url('../images/theadimage.png') 365px bottom no-repeat;
}

tbody 
{
    background: url('../images/tbodyimage.png') 365px top repeat-y;
}

tfoot 
{
    background: url('../images/tfootimage1.png') 365px top no-repeat, url('../images/tfootimage2.png') 0px -8px repeat-x;
}

这是在除 chrome 之外的所有浏览器中正确显示图像（奇怪）。如果我将 tbody 更改为 repeat-x，我会看到图像，但是当设置为 no-repeat 或 repeat-y 时，背景图像会完全消失。

我在这里想念什么？chrome有解决方案或解决方法吗？

4

2 回答 2

2

经过更多搜索后，我发现这是Chrome 中的一个已知问题，对我有用并且在所有其他浏览器中仍然保持正确渲染的解决方法是将td元素渲染th为内联块，将tr元素渲染为块。将以下 CSS 添加到原始问题中提到的 CSS 是对我有用的解决方案。

table.problemTable tr {
    display: block;
}
table.problemTable td, table.problemTable th {
    display: inline-block;
}
于 2012-07-22T17:55:49.137 回答
1

这是一个解决方案，您需要在 tfoot tr {} 而不是 tfoot {} 中指定样式。同样的方法适用于所有人。

CSS

tfoot{ background: url(tfoot.gif) no-repeat; width: 604px !important; // 604 is width of table}
tr {background: #e0e0e0;}
tfoot tr {background: url(tfoot.gif) no-repeat; width: 604px; display: table;}

HTML：

<table><thead><tr><th>Header 1</th></tr></thead>
<tbody><tr><td>Body cell</td></tr></tbody>
<tfoot><tr><td>Footer Cell </tr></tfoot></table>

希望这会帮助你......一切顺利

于 2012-07-14T06:50:36.470 回答