CSS: границы таблицы разделены по горизонтали и свернуты по вертикали

Question

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

РЕДАКТИРОВАТЬ : это желаемый результат:

Answer 1

Возможно

table {
  border-spacing: 1px 0;
}

Answer 2

Самое близкое, что я могу получить:

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

К сожалению, это создаст двойную толстую линию между строками.Отрицательные значения не допускаются в свойстве border-spacing, в противном случае -1px, вероятно, сработает.

---

Вы можете сделать другие строки шириной 2px, если это приемлемо, тогда, по крайней мере, у вас не будетразличная толщина границы:

table {
    border-collapse: separate;
    border-spacing: 4px 0;
}
table td, table th {
    border-width: 1px 2px;
    border-style: solid;
    border-color: black;
}
table tr:first-child th,
table tr:first-child td {
    border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
    border-bottom-width: 2px;
}

Answer 3

Это может быть достигнуто без использования дополнительных элементов div в ячейках th & td.Это решение работает в Chrome, Firefox и IE8 +.

CSS

table
{
    border-collapse: separate;
    border-spacing: 10px 0px;
}
td, th
{
    padding: 10px;
    border: 1px solid #000;
    border-top: none;
}
table tr:first-child th
{
    border-top: 1px solid #000;
}

Изменить таблица tr: первый ребенок th на table tr: first-child td , если первая строка таблицы не содержит ячейки заголовка таблицы (TH).

Смотрите мой jsfiddle здесь: Таблица с интервалом между столбцами, но свернутой границей строки

Answer 4

Нет, border-collapse не позволяет отдельно определять горизонталь и вертикаль. Вы можете добиться этого с помощью дополнительной разметки (которая на столе может в конечном итоге составить много дополнительной разметки), поэтому я не советую, , но я дам код для этого:

Html:

<table>
   <tr>
     <th><div>Header 1</div></th>
     <th><div>Header 2</div></th>
   </tr>
   <tr>
     <td><div>Content 1</div></td>
     <td><div>Content 2</div></td>
   </tr>
   <tr>
     <td><div>Content 3</div></td>
     <td><div>Content 4</div></td>
   </tr>
</table>

и css:

table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}

Конечно, вы можете захотеть использовать класс на div или дочерний селектор, какой-то способ нацеливания только на div, если у вас есть другие div в данных table. margin контролирует ваш горизонтальный зазор, и, конечно, ваша ширина padding или border может быть любой, какой вы захотите.

Answer 5

Это то, что вы ищете?

table {
    border: 1px solid black;
}

table td {
    border: 1px solid red;
    margin: 3px;  
}

Он не использует свойство border-collapse, но создает внешнюю границу таблицы с каждым <td> в своей отдельной границе.