html - CSS格式化表头

Question

我承认几年前我在网上下载了这个用于表格布局的 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 中使用该标记的每个单元格(排除 header 中使用 ? 的内容)
底部的 (table.stats4 td.hed) 有点令人困惑，因为没有名为 的 HTML 元素。我不明白这个标签。它应该读作“table.stats4 th”吗？注释掉就奇怪了，header没变。

整个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;
}

Answer 1

试试这个:-

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

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