Question

我必须忽略一些东西，我似乎可以弄清楚。我将边框应用于表格单元格，但它们没有显示。请有人看看下面的标记和CSS，并帮助我。以下是static site我已将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;
}

Answer 1

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

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

应写成

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

Answer 2

在您的代码中出现错误：

            <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 {

Answer 3

在您的CSS中，您需要在,和td之间添加th，否则它只会将样式应用于th td的子项td, th { border: 2px solid red; } 1}}：

</thead>

此外，您的HTML有点乱 - </tr>在结束<thead>之前。您还指定了<tbody>但没有{{1}} ...

无法对表td应用边框

3 个答案: