css table inner border only

How to create a table with no outer border but inner borders only. Something like this one (See bottom right in the page). I know that开发者_StackOverflow社区 I can create it manually like they did, I mean to give a class to each td but isn't out there a better way to realize this?

No they didn't do it that way, it's done in a nice way! :)

This removes the right border from the cells:

.sidebar-stats td:last-child, .sidebar-stats th:last-child {
    border-right: 0 none;
}

(In the same way you can remove the bottom-border for the last row. You can use Firebug to analyse their CSS, helps a lot!)

Here's a solution that'll work in all browsers, but requires you to add a CSS class to the furthest right and bottom <td>'s in your table (vs having to give a class to each <td>)

<table>
    <tr><td class="inner">text</td><td class="inner right">text</td></tr>
    <tr><td class="inner bottom">text</td><td class="inner bottom right">text</td></tr>
</table>

.inner {
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;    
}

.right {
    border-right: 0;   
}

JSFiddle: http://jsfiddle.net/HS4nQ/3/

You can style the td elements to have borders, and then giver your table border:0, an make sure to add border-collapse:collapse to the table as well. It should look like this in the end:

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

td {
border:1px gray solid;
border-collapse:collapse;
}

This is the :first-child variation:

http://jsfiddle.net/6Z7R9/

table.mytable > * > tr > th,
table.mytable > * > tr > td {
  border-left: 10px solid red;
  border-top:  10px solid red;
}

table.mytable > * > tr > th,
table.mytable > * > tr > td:first-child {
  border-left: none;
}

table.mytable > *:first-child > tr:first-child > th,
table.mytable > *:first-child > tr:first-child > td {
  border-top: none;
}