CSS внешняя граница таблицы другого цвета, чем внутренние границы между ячейками таблицы

Question

У меня есть такая таблица:

    <table>
        <caption>Caption:</caption>
        <thead>
            <tr>
                <td style="width: 65%;">A</td>

                <td class="center" style="width: 5%;">B</td>
                <td style="width: 15%;">C</td>
                <td style="width: 15%;">D</td>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td >aaa</td>
                <td>bbb</td>
                <td>ccc</td>
                <td>ddd</td>
            </tr>
        </tbody>
    </table>

С такими стилями:

table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
    border: 1px solid #111;
}
table th, table td {
    vertical-align: middle;
}
table td {
    border: 1px solid #888;
    padding: .2em .4em;
}

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

Я хочу, чтобы внешняя граница была темнее (# 222), чем внутренняя граница (# 888).

Answer 1

Я добавил дополнительную строку в вашу таблицу для целей этой демонстрации ...

<table>
    <caption>Caption:</caption>
    <thead>
        <tr>
            <th style="width: 65%;" class="first">A</th>
            <th class="center" style="width: 5%;">B</th>
            <th style="width: 15%;">C</th>
            <th style="width: 15%;" class="last">D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="first">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td class="last">ddd</td>
        </tr>
        <tr class="final">
            <td class="first">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td class="last">ddd</td>
        </tr>
    </tbody>
</table>

А вот и CSS.

table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
}

th, td {
    vertical-align: middle;
    border: 1px solid #888;
    padding: .2em .4em;
}

table > thead > tr > th {
    border-top: 1px solid #111;
}

tr.final > td {
    border-bottom: 1px solid #111;
}

.first {
    border-left: 1px solid #111;
}

.last {
    border-right: 1px solid #111;
}

Добавлено ссылка jsfiddle для предварительного просмотра кода

Answer 2

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

Я хочу, чтобы внешняя граница была темнее (# 222), чемвнутренняя граница (# 888).

Для сплошных границ 1px более простое решение, чем оригинал:

table { border: 1px solid #222; border-collapse: collapse; }
td    { border: 1px inset #888;  }

Для ширины границы, превышающей 1px, и сохраняя «сплошной» стиль границы, установите ширину границы таблицы, по крайней мере, на 1px, чем ширина границы td, например:

table { border: 3px solid #222; border-collapse: collapse; }
td    { border: 2px solid #888;  }

Это хорошо работает в Firefox и Chrome (по крайней мере для версий с 2011 года).

Однако в IE8 есть несоответствия: при использовании темных цветов внешней / светлой внутренней границы внутренние границы заканчиваются темной мутной смесьювнешние / внутренние цвета.Но с светлыми внешними / темными внутренними границами IE8, похоже, работает нормально.

В любом случае, отличным инструментом для экспериментов со стилями таблиц является
Стиль границ таблиц в HTML и CSS.Wizard

Answer 3

Исправлено без каких-либо дополнительных классов.

поддержка: ie8 + из-за: селектора last-child http://jsfiddle.net/nyu7n/87/

table {
    width: 80%;
    margin: 2em auto;
    border: 1px solid blue;
}
td {
   border-bottom: 1px solid red;
    border-left: 1px solid red;
    padding: .2em .4em;
}
td:first-child {
    border-left: none;
}
tr:last-child td {
    border-bottom: none;
}

Answer 4

тд и границы таблицы будут разрушаться снаружи.Я бы просто добавил div вокруг таблицы и добавил к ней границу # 222.

Редактировать: и да, это означало бы перемещение заголовка за пределы тега таблицы или добавление отрицательной маржинальной вершины ктаблица.