Unable to apply border to Table td

Question

I must be overlooking something and I can seem to figure it out. I applied borders to my table cells and they are not showing. Please can someone take a look at the markup and css below and help me out. Here is the static site I have applied the Myers CSS reset to my stylesheet, not sure if it makes a difference.

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

And here is the CSS

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

}

td th {
    border: 2px solid red;
}

Answer 1

In your code there is an error on:

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

Also change td th { with td,th {

Answer 2

In your CSS, you need to add a , between td and th, otherwise it's only looking to apply the style to th which are children of td:

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

Also, your HTML is a little out of order - the </thead> is before the closing </tr>. You've also specified a <thead> but no <tbody>...

Answer 3

you could change border-collapse:collapse; to border-spacing:0;, but

td th { border: 2px solid red; }

should be written so

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