Вопросы Теги

CSS: граница таблицы разделяется горизонтально и сворачивается вертикально

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

Править: это - требуемый результат:

alt text

7
задан Community 8 February 2017 в 14:28
поделиться

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 управляет горизонтальным зазором, и, конечно же, ширина заполнения или border может быть любой, какой вы хотите.

3
ответ дан 6 December 2019 в 07:05
поделиться

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

table {
    border: 1px solid black;
}

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

Здесь не используется граница -collapse , но при этом создается внешняя граница таблицы с каждым на отдельной границе.

0
ответ дан 6 December 2019 в 07:05
поделиться

Возможно

table {
  border-spacing: 1px 0;
}
13
ответ дан 6 December 2019 в 07:05
поделиться

Ближайшее, что я могу найти, это: 

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

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

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

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;
}
6
ответ дан 6 December 2019 в 07:05
поделиться