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

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

17 голосов
/ 04 мая 2011

Я хочу использовать 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?

Ответы [ 5 ]

14 голосов
/ 04 мая 2011

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

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/

7 голосов
/ 04 мая 2011

Попробуйте это: 

tbody { display:block; margin: -1px; }
5 голосов
/ 21 августа 2015

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

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

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/

1 голос
/ 13 июля 2014

Создайте 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;
}
0 голосов
/ 04 мая 2011

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

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

table td {
    border: 1px solid red;
}
...