0

css を使用して背景をセルに設定しますが、セル全体には適用されません。

背景画像を First and last に設定しようとしています<TR>が、このように表示されています。

.firstfirst と last にクラス プロパティを適用しようとしています<tr>。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>
4

1 に答える 1

0

:first-child疑似クラスとを使用できます:last-child。私の例を見てください：jsfiddle

ただし:last-child、クロスブラウザではありません。IEには修正が必要です。

また、背景w3schoolsの参照画像を指定する際にエラーが発生しました。

于 2012-06-09T20:10:45.023 に答える