css table inner border only - html

Question

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

Answer 1

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

Answer 2

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/

Answer 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;
}

Answer 4

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