Как я могу сделать так, чтобы моя граница не перезаписывала мою границу для моего стола?

Question

Как я могу сделать так, чтобы моя нижняя граница не перезаписывала мою рамку для моего стола? Мне кажется, что стороны должны быть полностью черными, а не серыми - или "серыми" для всех вас в Англии. ;)

ОБНОВЛЕНИЕ: Не касается перезаписи нижней границы таблицы - я надеюсь устранить ее на сторонах, где граница серого цвета.

Вот мой код, с которым я работаю, и страница jsfiddle.net для вашего удобства;)

<table>
    <tr>
        <td>row1</td>
    </tr>
    <tr>
        <td>row2</td>
    </tr>
    <tr>
        <td>row3</td>
    </tr>
    <tr>
        <td>row4</td>
    </tr>
</table>

table {
    border: 4px solid #000;
    width: 400px;
}

table tr {
    border-bottom: 4px solid #CCC;
}

Answer 1

Установите border-collapse:separate на свой стол и добавьте границу к td вместо tr:

http://jsfiddle.net/ptriek/uJ5zN/2/

Answer 2

На данный момент решение @ ptriek, кажется, является тем, которое лучше отвечает на ваш вопрос, но, для справки, вот обходной путь, использующий <div>, чтобы обернуть вещи.Это решение также сохраняет целостность последней границы <tr> и может пригодиться в других ситуациях.

Fiddle: http://jsfiddle.net/uJ5zN/4/

HTML

<div class="wrapper">
    <table>
        <tr>
            <td>row1</td>
        </tr>
        <tr>
            <td>row2</td>
        </tr>
        <tr>
            <td>row3</td>
        </tr>
        <tr>
            <td>row4</td>
        </tr>
    </table>
</div>

CSS

.wrapper
{
    border: 4px solid #000;
    width: 400px;
}

table {
    width: 400px;
}

table tr{
    border-bottom: 4px solid #CCC;
}

Answer 3

Одним из способов будет использование селектора CSS last-child следующим образом:

table {
    border: 4px solid #000;
    width: 400px;
}

table tr {
    border-bottom: 4px solid #CCC;
}

table tr:last-child {
    border-bottom: 4px solid #000;
}