Если вы используете элемент-обертку вокруг строк, вы можете использовать CSS :last-child для работы как с ячейками справа, так и с ячейками внизу.
Я предполагаю, что ваш элемент-обертка также будет <div>:
.cell {
border-bottom:1px solid red;
border-right:1px solid red;
}
.matrix>div:last-child>.cell, .matrix>div>.cell:last-child {
border-bottom:none;
}
Но учтите, что :last-child не поддерживается IE8 и более ранними версиями.
Возможно, вам больше повезет, установив противоположные границы (т. Е. Сверху и слева), и вместо этого используйте :first-child, чтобы убрать крайнюю левую и верхнюю ячейки, потому что :first-child поддерживается IE7 и IE8. Конечный результат будет точно таким же.
Подробнее о поддержке браузером селекторов CSS можно узнать здесь: http://quirksmode.org/css/contents.html
Если вам нужно использовать :last-child и вам нужно поддерживать IE7 / 8, то вы можете получить его, используя библиотеку javascript, такую как Selectivizr .
Однако, после всего этого, я бы также сказал, что, учитывая элемент обертки, который я добавил для строк, мы получаем ту же базовую структуру, что и таблица HTML. Итак, вопрос в том, почему бы просто не использовать таблицу? Затем вы можете использовать border-collapse для достижения аналогичных результатов.
Что касается этого последнего пункта, я знаю, что вы поставили «без таблиц» в качестве тега в вопросе, поэтому я предполагаю, что вы работаете над дизайном без таблиц. Однако, если данные действительно имеют табличный характер, то нет ничего плохого в использовании таблицы. Дизайн без таблиц предназначен для того, чтобы запретить людям использовать таблицы для произвольного макета страницы, но таблицы по-прежнему идеально подходят для использования в правильном контексте. Описание в вопросе действительно звучит так, как будто ваш пример попадает в эту категорию.
Надеюсь, это поможет.