How can I apply a border only inside a table?

Question

I am trying to figure out how to add border only inside the table. When I do:

table {     border: 0; } table td, table th {     border: 1px solid black; } 

The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table).

Here is markup I'm using for tables (even though I think that is not important):

<table>     <tr>         <th>Heading 1</th>         <th>Heading 2</th>     </tr>     <tr>         <td>Cell (1,1)</td>         <td>Cell (1,2)</td>     </tr>     <tr>         <td>Cell (2,1)</td>         <td>Cell (2,2)</td>     </tr>     <tr>         <td>Cell (3,1)</td>         <td>Cell (3,2)</td>     </tr> </table> 

And here are some basic styles I apply to most of my tables:

table {     border-collapse: collapse;     border-spacing: 0; } 

Answer 1

If you are doing what I believe you are trying to do, you'll need something a little more like this:

table {   border-collapse: collapse; } table td, table th {   border: 1px solid black; } table tr:first-child th {   border-top: 0; } table tr:last-child td {   border-bottom: 0; } table tr td:first-child, table tr th:first-child {   border-left: 0; } table tr td:last-child, table tr th:last-child {   border-right: 0; } 

jsFiddle Demo

The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.

Cheers.

EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.

Answer 2

this works for me:

table {     border-collapse: collapse;     border-style: hidden; }  table td, table th {     border: 1px solid black; } 

view example ...

tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.