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 says you cannot place a background image on a <TR>
tag. That needs to change.
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.
Oh, This needs to work in IE8 as that is the environment I am working with.
Here is an example of the absolute positioning result:
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…