Applying Table cell borders

Question

I have an HTML table with the class "productsTable". I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You

td.productsTable
{
    border: 1px dotted #999999;
}

.productsTable td
{
    border: 1px dotted #999999;
}

HTML:

<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>           
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>

Answer 1

td.productsTable won't work because you have no <td> elements with a productsTable class.

However, your second CSS rule, .productsTable td, this will work because you do have <td> elements that have a parent element with the class productsTable.

I've made a quick fiddle of this, and you can see it working correctly:

td {
  border: 1px dotted #999;
}

<table width="100%" height="100%" cellspacing="2px;">
  <tr>
    <td width="40%">We Offer:</td>
    <td width="20%" align="center">e-phone FREE</td>
    <td width="20%" align="center">Personal</td>
    <td width="20%" align="center">Pro PBX</td>
  </tr>
  <tr>
    <td width="40%">Pricing</td>
    <td width="20%" align="center">FREE</td>
    <td width="20%" align="center">£3 per month</td>
    <td width="20%" align="center">From £5 per month</td>
  </tr>
</table>

If this isn't working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting element to see.

Answer 2

I want to give each cell in the table a border.

What I've understand is you want cell border like this:

Here is the fiddle of what you want.

Use following CSS:

table.productsTable {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: separate;
    background-color: white;
}

table.productsTable td {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: white;
    -moz-border-radius: ;
}

​ Hope this helps.