为表格表行应用css

时间:2014-12-08 05:40:28

标签: html css stylesheet

我需要一个像邮箱一样的html表。我使用下面的css,这是现在的绝对位置模型

<style type="text/css">
    table {
        border : 1px solid grey;
        left: 5px; 
        top: 207px; 
        width: 762px; 
        height: 21px; 
        border-collapse: collapse; 
        position: absolute; 
        z-index: 104; 
    }

    tr {
        height: 20px;
        border: 1px solid black;
    }

    .unread{
        height: 20px;
        border: 1px solid black;
        font-weight: bold !important;
    }

    th {
        height: 20px;
        border: 1px solid black;
        background-color: grey;
        padding: 2px;
    }

    td {
        height: 20px;
        border: 1px solid black;
        background-color: white;
        color: black;
        padding: 2px;
    }

    .checkbox{
            text-align: center
    }
</style>

除了未读之外,它的工作正常。对于未读行,我需要加粗。我该如何应用这两行特定行。如果我申请罚款。但是连续..我的桌子就像下面一样

<table id="tblHead" cellspacing="0" cellpadding="0">
                        <tr>
                            <th> </th>
                            <th> </th>
                            <th>Sender</th>
                            <th>Subject</th>
                            <th>Received Date</th>
                        </tr>
                    <tr>
                        <td class="checkbox">
                            <input type="checkbox" />
                        </td>
                        <td><img src="../../Images/mail/readmail.gif" alt="read" /></td>
                        <td>System Administrator</td>
                        <td>The schedule has been registered ! - [Rerationship of ABC Project]</td>
                        <td>16/12/2004 14:07</td>
                    </tr>
                    <tr>
                        <td class="checkbox">
                            <input type="checkbox" />
                        </td>
                        <td><img src="../../Images/mail/readmail.gif" alt="read" /></td>
                        <td>data</td>
                        <td>subject data</td>
                        <td>10/12/2013 15:53</td>
                    </tr>
                    <tr class="unread">
                        <td class="checkbox">
                            <input type="checkbox" />
                        </td>
                        <td><img src="../../Images/mail/unreadmail.gif" alt="unread" /></td>
                        <td>data</td>
                        <td></td>
                        <td>14/03/2013 17:26</td>
                    </tr>
                    <tr class="unread">
                        <td class="checkbox">
                            <input type="checkbox" />
                        </td>
                        <td><img src="../../Images/mail/unreadmail.gif" alt="unread" /></td>
                        <td>data</td>
                        <td></td>
                        <td>14/03/2013 17:26</td>
                    </tr>                
                </table>

0 个答案:

没有答案