我如何为这个页面设计thead和tbody的样式？

Question

我有一个包含CSS的HTML页面。 CSS适用于页面的某些部分，但不适用于我讨论的部分。我希望有一个背景颜色并进行一些其他样式更改，但它们没有实现。

这是CSS：

table.tablesorter thead tr, table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #e6EEEE; font-size: 8pt; padding: 4px; }
table.tablesorter thead tr .header { cursor: pointer; }
table.tablesorter tbody td { padding: 6px; vertical-align: top; border-bottom: dashed 1px #333; }
table.tablesorter tbody tr.odd td { background-color: #F0F0F6; }
table.tablesorter thead tr .headerSortUp { background-image: url(images/asc.gif) no-repeat; }
table.tablesorter thead tr .headerSortDown { background-image: url(images/desc.gif) no-repeat; }
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #8dbdd8; }

这是HTML：

    <table>
    <thead>
    <tr>
    <th>Pilot ID</th>
    <th>Rank</th>
    <th>Total Flights</th>
    <th>Total Hours</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td align="center"><?php echo $pilotcode; ?></td>
    <td align="center"><?php echo $userinfo->rank;?></td>
    <?php
    if($report)
    { ?>
        <!--<td><strong>Latest Flight: </strong><a 
                href="<?php echo url('pireps/view/'.$report->pirepid); ?>">
                <?php echo $report->code . $report->flightnum; ?></a>
        </td>-->
    <?php
    }
    ?>
    <td align="center"><?php echo $userinfo->totalflights?></td>
    <td align="center"><?php echo $userinfo->totalhours; ?></td>
    </tr>
    </table>

所有这些结果都是粗体文字，下面是纯文字。

Answer 1

您的CSS正在将样式应用于具有类tablesorter的表。只需将其添加到表格标签

即可

<table class='tablesorter'>
table content
</table>

Demo