0

我一定是忽略了一些东西，我似乎可以弄清楚。我对表格单元格应用了边框，但它们没有显示。请有人可以看看下面的标记和css并帮助我。这是我将 Myers CSS 重置应用到我的样式表的静态站点，不确定它是否有所作为。

<table>
                <caption>Your Upcoming Bill Due Dates</caption>
                <thead>
                    <tr>
                    <th scope="col"></th>
                    <th scope="col">Bill Due Date</th>
                    <th scope="col">Bill Name</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Frequency</th>
                    <th scope="col">Last Paid</th>
                </thead>                    
                </tr>
                <tr>
                    <td></td>
                    <td>March 7th, 2013</td>
                    <td>Childcare</td>
                    <td>$560</td>
                    <td>Weekly</td>
                    <td>February 26th, 2013</td>
                </tr>
                <tr>
                    <td></td>
                    <td>June 13th, 2013</td>
                    <td>Water Bill</td>
                    <td>$125.60</td>
                    <td>Monthly</td>
                    <td>May 2nd, 2013</td>
                </tr>

            </table>

这是CSS

table {
    clear: both;
    border: 2px solid blue;
    border-collapse: separate;

}

td th {
    border: 2px solid red;
}
4

3 回答 3

1

您可以更改border-collapse:collapse;为border-spacing:0;，但是

td th { 边框：2px 纯红色；}

应该这样写

td ,th {
    border: 2px solid red;
}
于 2013-06-21T17:40:06.630 回答
1

在您的代码中有一个错误：

            <thead>
                <tr>
                <th scope="col"></th>
                <th scope="col">Bill Due Date</th>
                <th scope="col">Bill Name</th>
                <th scope="col">Amount</th>
                <th scope="col">Frequency</th>
                <th scope="col">Last Paid</th>
            </thead>  /* HERE  */                  
            </tr>

            IT MUST BE

            <thead>
                <tr>
                <th scope="col"></th>
                <th scope="col">Bill Due Date</th>
                <th scope="col">Bill Name</th>
                <th scope="col">Amount</th>
                <th scope="col">Frequency</th>
                <th scope="col">Last Paid</th>
                </tr>                 
            </thead>

td th {也改变td,th {

于 2013-06-21T17:42:21.160 回答
0

在您的 CSS 中，您需要添加一个,betweentd和th，否则它只是希望应用th属于 的子项的样式td：

td, th {
    border: 2px solid red;
}

此外，您的 HTML 有点乱 -</thead>是在关闭之前</tr>。您还指定了一个<thead>但没有<tbody>...

于 2013-06-21T17:41:32.200 回答