Только внутренняя граница таблицы CSS

Question

Как создать таблицу без внешней границы, а только с внутренними границами. Что-то вроде этого (см. Внизу справа на странице). Я знаю, что могу создать его вручную, как они, я имею в виду дать класс для каждого тд, но разве нет лучшего способа это реализовать?

Answer 1

Нет, они так не делали, все сделано хорошо! :)

Это удаляет правую границу из ячеек:

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

(Таким же образом вы можете удалить нижнюю границу для последней строки. Вы можете использовать Firebug для анализа их CSS, это очень помогает!)

Answer 2

Вот решение, которое будет работать во всех браузерах, но требует, чтобы вы добавили класс CSS к крайнему правому и нижнему <td> в вашей таблице (против необходимости присваивать класс каждому <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

Это вариант первого ребенка:

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

Answer 4

Вы можете стилизовать элементы td так, чтобы они имели границы, а затем задать таблицу border:0, обязательно добавив border-collapse:collapse к таблице.В итоге это должно выглядеть так:

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

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