< tr>上的背景图像 [英] Background Image on <tr>
问题描述
我有一个表有13列和未知数的行,可以是1,可以是50+。该表也被包装在一个滚动包装中,因此一次只能看到4行。某些行需要有跨越整行的文本EXPIRED的背景图片。
I have a table that has 13 columns and an unknown number of rows, could be 1, could be 50+. The table is also wrapped in a scroll wrapper so that only 4 rows are visible at a time. Some of the rows need to have a background image of text "EXPIRED" that spans the entire row.
我尝试过许多不同的方法来尝试和解决这个问题,找到一个有效的解决方案。
I have tried many different ways to try and solve this and have yet to find a solution that works.
W3C表示您无法在< TR>
标签上放置背景图片。需要改变。
W3C says you cannot place a background image on a <TR>
tag. That needs to change.
我尝试的一个解决方案是在第一个<$ c内部放置< div>
$ c>< td> 并使用CSS绝对定位:
One solution I tried was placing a <div>
inside the first <td>
and using CSS to absolutely position it:
<table style="empty-cells:show" class="wiTable">
<tr><td><div class="expired"></div></td>
</table>
.expired {
background:url("/images/Expired.png") no-repeat left top;
position: absolute;
left: 0;
width: 900px;
height: 26px;
z-index: 0;
}
这是一个点。问题是它也放置在被滚动封装器隐藏的行上,并且图像没有与表滚动。
This worked up to a point. The problem is it also placed the image on the rows that were hidden by the scroll wrapper and the images did not scroll with the table.
我想我也可以打破将图像分割成段并将它们放在单独的单元格中,但这不会工作,因为我需要它在几个表上,单元格不是跨表的固定宽度。
I thought I could also break the image up into segments and place them in the individual cells, but that won't work because I need it on several tables and the cells are not a fixed width across the tables.
哦,这需要在IE8工作,因为这是我正在使用的环境。
Oh, This needs to work in IE8 as that is the environment I am working with.
这里是一个绝对定位结果的例子:
< img src =https://i.stack.imgur.com/CXqcO.pngalt =过期示例>
Here is an example of the absolute positioning result:
推荐答案
使用伪类,你可以使用first-child TD而不是TR来做一些诡计。这也假设你的表有一个固定的宽度,每一行有固定的高度。这将无法使用流畅的宽度,但如果您想要,您可以为某些媒体断点输入调整后的宽度。
Using pseudo classes, you can do some trickery using the first-child TD instead of the TR. This also assumes your table has a fixed width and each row has a fixed height. This won't work with a fluid width, although, you could enter adjusted widths for certain media breakpoints if you wanted.
凝结HTML标记
<div class="container">
<table>
<tr>
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr class="expired">
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr class="expired">
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
</table>
</div>
CSS
.container {
overflow-y: scroll;
height: 115px;
}
table {
color: #fff;
width: 500px;
border-collapse: collapse;
}
table tr.expired {
position: relative;
}
table tr.expired td:first-child:before {
content: "";
position: absolute;
width: 500px;
height: 30px;
z-index: -100;
top: 0;
left: 0;
/*background: red;*/
background: url('http://lorempixel.com/output/nightlife-q-c-640-480-3.jpg');
}
table tr.expired td {
z-index: 100;
position: relative;
background: transparent !important;
}
table tr td {
padding: 5px;
background: #999;
}
table tr:nth-child(odd) td {
background: #ccc;
}
这篇关于< tr>上的背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!