Свойство border-collapse задает способ отображения границ ячеек таблицы.
Это свойство применимо к тегу <table>.
Значение свойства border-collapse
- collapse – линия между соседними ячейками общая. Отображается одна линия,
- separate – таблица и каждая ячейка имеют собственные границы. В местах соприкосновения ячеек рисуются две линии,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- separate
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство border-collapse </title>
<style type="text/css">
.table{border-collapse:collapse}
</style>
</head>
<body>
<p> Свойство border-collapse </p>
<table class="table" width="700" border="2" bordercolor="#0000FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<p> Линия между соседними ячейками общая. </p>
<table width="700" border="2" bordercolor="#FF00FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p> Таблица и каждая ячейка имеют собственные границы. </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство border-collapse </title>
<style type="text/css">
.table{border-collapse:collapse}
</style>
</head>
<body>
<p> Свойство border-collapse </p>
<table class="table" width="700" border="2" bordercolor="#0000FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<p> Линия между соседними ячейками общая. </p>
<table width="700" border="2" bordercolor="#FF00FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p> Таблица и каждая ячейка имеют собственные границы. </p>
</body>
</html>
Результат
