html - CSS格式化表格标题

我承认几年前我已经在线下载了此CCS以便进行表格布局，现在已经制作了一个新表格，但我发现标题行非常狭窄，很难看到一列的结尾和另一列的起点。标头中也没有左边界或右边界。

HTML：

<table align="center" class="stats4">
    <tr>
        <th>Category</th>
        <th>Received    </th>
        <th>Open</th>
        <th>Pending</th>
        <th>Closed</th>
        <th>Closed <= 5 Days</th>
        <th>Closed 6-14</th>
        <th>Closed 15-30</th>
        <th>Closed > 30</th>
        <th>Avg Days To Close</th>
    </tr>
    <%Do While not RSClosedCallSummary.EOF %>
    <tr>
        <td><%= RSClosedCallSummary("strCategory") %></td>
        <td><%= RSClosedCallSummary("CallsReceived") %></td>
        <td><%= RSClosedCallSummary("CallsOpen") %></td>
        <td><%= RSClosedCallSummary("CallsPending") %></td>
        <td><%= RSClosedCallSummary("CallsClosed") %></td>
        <td><%= RSClosedCallSummary("ClosedWithin5Days") %></td>
        <td><%= RSClosedCallSummary("ClosedWithin14days") %></td>
        <td><%= RSClosedCallSummary("Closed15to30") %></td>
        <td><%= RSClosedCallSummary("ClosedGt30") %></td>
        <td><%= FormatNumber(RSClosedCallSummary("AvgDaysToClose"), 2) %></td>
    </tr>
    <%RSClosedCallSummary.MoveNext
    Loop
    %>
</table>

CSS：

/* Stats 4 table styles */


table.stats4 {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 7px;
}

table.stats4 td {
    background-color: #CCC;
    color: #000;
    padding: 5px 7px 5px 7px;
    text-align: left;
    border: 1px #fff solid;
}

table.stats4 td.hed {
    background-color: #666;
    color: #fff;
    text-align: left;
    border: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
}

我曾考虑过在CSS的table.stats4 td.hed部分添加“ padding：”，但这没有影响。实际上，即使我注释掉了整个部分，标题仍然保持不变。

我在网上看过，但是所有示例都使用ID，而不是类。我记不清这三个元素之间如何存在联系。我认为..

前一个（table.stats4）适用于整个表格。
中间的那个（table.stats4 td）大概适用于HTML中使用标记的每个单元（以排除使用？的标头中的内容）
底部的（table.stats4 td.hed）有点令人困惑，因为没有称为的HTML元素。我不明白这个标签。它应该显示为“ table.stats4 th”吗？如果我将其注释掉，这很奇怪，标题不变。

整个CSS文件在下面；

body {
    font-family: arial;
    font-size: 14px;
    background: white;
}

/* Hyperlink styles */


a:link {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

/* Normal 'solid' black border table */

table.standard { font-size: 14px  border-collapse: collapse;
}

/* Table Style for displaying of statistics */

table.stats {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11px;
    color: #fff;
    width: 400px;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    float: left
}

table.stats td {
    background-color: #CCC;
    color: #000;
    padding: 4px;
    text-align: left;
    border: 1px #fff solid;
}

table.stats td.hed {
    background-color: #666;
    color: #fff;
    padding: 4px;
    text-align: left;
    border-bottom: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
}

/* Stats 2 table styles */


table.stats2 {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11px;
    color: #fff;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px/*;
    float:left*/
}

table.stats2 td {
    background-color: #CCC;
    color: #000;
    padding: 4px;
    text-align: left;
    border: 1px #fff solid;
}

table.stats2 td.hed {
    background-color: #666;
    color: #fff;
    padding: 10px;
    text-align: left;
    border-bottom: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
}

/* Stats 3 table styles */


table.stats3 {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11px;
    color: #fff;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}

table.stats3 td {
    background-color: #CCC;
    color: #000;
    padding: 4px;
    text-align: left;
    border: 1px #fff solid;
}

table.stats3 td.hed {
    background-color: #666;
    color: #fff;
    padding: 4px;
    text-align: left;
    border-bottom: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
}

#table_container {
    width: 300px;
    margin: 0 auto;
}

/* Stats 4 table styles */


table.stats4 {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 7px;
}

table.stats4 td {
    background-color: #CCC;
    color: #000;
    padding: 5px 7px 5px 7px;
    text-align: left;
    border: 1px #fff solid;
}

table.stats4 td.hed {
    background-color: #666;
    color: #fff;
    text-align: left;
    border: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
}

最佳答案

尝试这个：-

table.stats4 tr th {
 border:1px solid #000;
}

它将为表格标题添加边框。