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

我考虑添加＆＃34;填充：＆＃34;到CSS中的table.stats4 td.hed部分 - 但它没有任何影响。事实上，即使我注释掉整个部分，标题也保持不变。

我看过网上但所有的例子都使用ID，而不是类。我不记得究竟是如何存在三个元素之间的联系。我想..

顶部的一个（table.stats4）适用于整个表格中间的一个（table.stats4 td）可能适用于使用标签的HTML中的每个单元格（用于排除标题中使用的东西？）
底部的一个（table.stats4 td.hed）有点令人困惑，因为没有调用HTML元素。我不明白这个标签。应该阅读＆＃34; table.stats4 th＆＃34;？如果我把它评论出来，那就很奇怪了，标题没有变化。

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

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

Answer 2

您可以简单地使用： -

.stats4 th {
    color:red;
}

表头内的文字将以红色显示。

CSS格式化表头

2 个答案: