Question

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有解决方案或解决方法吗？

Answer 1

经过一些搜索后，我发现这是一个known issue in Chrome，并且对我有用且仍然在所有其他浏览器中保持正确呈现的解决方法是将td和th元素呈现为内联-block和tr元素作为块。将以下CSS添加到原始问题中提到的那个解决方案对我有用。

table.problemTable tr {
    display: block;
}
table.problemTable td, table.problemTable th {
    display: inline-block;
}

Answer 2

这是一个解决方案，您需要在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>

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

thead，tbody和tfoot背景图像不显示在chrome中

2 个答案: