Можно ли объединить две границы таблицы друг с другом?

Я придал обоим своим таблицам одинаковый стиль для создания границы в 1 пиксель, но проблема в том, что когда две таблицы касаются друг друга, нижняя граница верхней таблицы и верхняя граница нижней таблицы встречаются и создают то, что выглядит граница 2px.

Как вы можете видеть здесь: jsfiddle

это CSS, который я использую для стилизации своих таблиц:

table,td, th {
   border-style:solid;
   border-width:1px;
   border-color:#000;
}

Я пробовал border-collapse:collapse;, но, похоже, это не помогает.


html css border css-tables
person SaturnsEye    schedule 23.08.2013    source источник
comment
jsfiddle.net/peteng/yrUXb/1 или если вам не нужна граница в 2 пикселя между таблицами: jsfiddle.net/peteng/yrUXb/2   -  person Pete    schedule 23.08.2013
comment
Это просто создает вид, похожий на border-collapse:collapse; но вы все еще можете видеть, что граница выглядит толще там, где встречаются две таблицы. Я пытаюсь заставить его выглядеть как граница в 1 пиксель, как если бы это была одна таблица.   -  person SaturnsEye    schedule 23.08.2013
comment
Много способов добиться этого. Проверьте решение Хашема. я думаю это лучшее   -  person MarsOne    schedule 23.08.2013

Ответы (4)


arrow_upward
10
arrow_downward

Идея состоит в том, чтобы удалить все соответствующие верхние границы каждой таблицы, следующей за другой таблицей.

http://jsfiddle.net/thirtydot/yrUXb/10/

table, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
}
table + table, table + table tr:first-child th, table + table tr:first-child td {
    border-top: 0;
}
person thirtydot    schedule 23.08.2013

arrow_upward
3
arrow_downward

Дайте стиль нижней таблице как:

margin-top:-1px;
padding-top:-1px;
person Rahul    schedule 11.08.2016
comment
Отрицательное значение недопустимо для заполнения - person LChuan; 06.05.2021

arrow_upward
1
arrow_downward

Вы можете переопределить стили с помощью селекторов соседнего уровня:

table + table {
    border-top: 0;
}

Или общие родственные селекторы

table ~ table {
    border-top: 0;
}

Скрипт №1

Обновлять

В этом случае лучше сначала свернуть границы:

table { border-collapse: collapse; }

table, td, th {
    border-style:solid;
    border-width:1px;
    border-color:#000;
}

table + table,
table + table tr:first-child > * {
    border-top: 0;
}

Скрипт №2

person Hashem Qolami    schedule 23.08.2013

arrow_upward
1
arrow_downward

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

table {
    border-spacing:0;
    border-collapse:collapse;
}
person Krixis    schedule 23.08.2013