Kango Kango - 2 months ago 16
HTML Question

How I can set the background image to table cells that have a colspan?

I use css to set the background to the cell but it does not apply to the whole cell.

I am trying to set the background image to First and last

<TR>
, but it's showing like this.

I am trying to apply
.first
class property for first and last
<tr>
. What should I do so it applies to TR?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.excel{
background:url(smallimage/excel.jpg);
background-size:24px 24px;
background-repeat:no-repeat;
position: relative;
margin:3px;
left: 2px;
top: 1px;
}


td.yellostar{
background-image: url(smallimage/yellowstar.jpg); /* forward slash for the path */
width: 20px; /* use you own image size; */
height: 20px; /* use you own image size; */
background-repeat: no-repeat;
background-position: center;
text-align: center;
vertical-align: top;
}
.first{
background-image:url(smallimage/trbackgr.jpg);
background-repeat: repeat-x;
}

</style>
</head>

<body>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr class="first">
<th colspan="2" class="first">chapter #|chapter Name</th>
<th>Linkage</th>
<th>project<br/>count</th>
<th>Task<br>count</th>
<th>issues<br> Open/All</th>
<th>Action</th>

</tr>
<tr >
<td>05</td>
<td><div class="excel" > &nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<u>Chapter 5:Data of Information</div></td>
<td class="yellostar" ></td>
<td><p align="center">3</p></td>
<td><p align="center">21</p>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>06</td>
<td><div class="excel">&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<u>Chapter 6:Data Tabels and Amortization Tabels</div></td>
<td class="yellostar">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>07</td>
<td><div class="excel" >&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<u>Chapter 7:Data consolidation,Links and Formula Auditing</div></td>
<td class="yellostar">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>08</td>
<td><div class="excel" >&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<u></td>
<td class="yellostar">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>09</td>
<td><div class="excel" >&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<u></div></td>
<td class="yellostar">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>10</td>
<td><div class="excel" >&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<u></div></td>
<td class="yellostar">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="first">


<td colspan="7" class="first" >&nbsp;</td>
</tr>
</table>
</body>
</html>

Answer Source

You can use pseudoclasses :first-child and :last-child . Look at my example: jsfiddle

But :last-child is not cross-browser, fixes will be needed for IE.

And you have an error in specifying the reference image for background w3schools.