Использование CSS, чтобы сделать внешний внешний цвет таблицы отличным от цвета границы ячеек

Я хочу использовать CSS для установки цвета внешней границы таблицы... Тогда внутренние ячейки будут иметь другой цвет границы...

Я создал что-то вроде этого:

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}

Проблема в том, что цвет таблицы меняется и становится красным, как вы можете видеть здесь: http://jsfiddle.net/JaF5h/

Если ширина границы таблицы увеличена до 2px, она будет работать: http://jsfiddle.net/rYCrp/

Я занимаюсь проблемами CSS и кросс-браузеров так долго... Это первый раз, когда я сталкиваюсь с чем-то подобным, и я полностью застрял... Не знаю, что делать!

Кто-нибудь знает, как это фиксировать с помощью border-width: 1px?

Ответ 1

Я бы это сделал, используя смежные селектора, например:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

Это немного повторяющийся, но он обеспечивает эффект, который вы после этого, устанавливая верхнюю и левую границы первой строки и столбца соответственно, а затем переписывая "внутренние" строки и ячейки с красным.

Это, конечно, не будет работать в IE6, поскольку он не понимает смежных селекторов.

http://jsfiddle.net/JaF5h/36/

Ответ 2

Попробуйте следующее:

tbody { display:block; margin: -1px; }

Ответ 3

Предыдущие ответы не полностью разрешили это для меня. Принятый ответ позволяет внутренним границам пересекать границу внешней таблицы. После некоторых экспериментов я придумал следующее решение.

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

HTML:

<table>
<tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>

CSS

table {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 0;
}
table td, table th {
    border: 1px solid red;
}

table tr td {
    border-right: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td{
    border-top: 0;
}

https://jsfiddle.net/o5ar81xg/

Ответ 4

Я забыл что-то важное. jsFiddle "нормализует" CSS с помощью листа reset. Если вы снимите флажок "normalize css" с левой стороны, вы получите черную границу. Будет добавлено дополнительное дополнение, которое будет удалено без таблицы стилей reset.

Ответ 5

Попробуйте следующее, что сработало для меня:

table {
    border-collapse: collapse;
    border: solid #000; 
}

table td {
    border: 1px solid red;
}

Ответ 6

Создайте div, окружающий вашу таблицу. Установите цвет рамки div для внешней таблицы. НЕ РАСПРОСТРАНЯЙТЕ таблицу. Вместо этого позвольте вашим ячейкам отделяться, чтобы показать цвет фона (внутренние границы) div внизу. Затем установите фоновые ячейки на цвет фона по вашему выбору.

HTML

<div id="tableDiv">
    <table id="studentInformationTable">
        <!-- Add your rows, headers, and cells here -->
    </table>
</div>

CSS

#tableDiv {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid brown;
    background-color: white;
}

table {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-color: brown;
}

td, th {
    background-color: #e7e1d3;
    padding: 10px 25px 10px 25px;
    margin: 0px;
}