5 августа буду в отъезде. отвечаю по возможности

Свойство border-collapse

Свойство border-collapse заставляет двойные границы между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы) схлопнуться и выглядеть как одна.

Данное свойство применяется только для таблиц и для элементов с display в значении table или inline-table. Для обычных блочных элементов оно, к большому сожалению, работать не будет. Учтите, что применять следует для таблицы, а не для ее ячеек.

Синтаксис

селектор { border-collapse: collapse | separate; }

Значения

Значение Описание
collapse Двойные границы будут выглядеть как одна. Есть побочные эффекты: перестанет работать свойство border-spacing и атрибут cellspacing.
separate Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой).

Значение по умолчанию: separate.

Пример . Значение separate

Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> table { border-collapse: separate; width: 400px; border-spacing: 0; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

:

Пример . Значение separate

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

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> table { border-collapse: separate; width: 400px; border-spacing: 0; } td { border: 1px solid red; text-align: center; }

:

Пример . Значение collapse

Сейчас в таблице все границы схлопнутся и станут выглядеть толщиной в 1px, как и хотелось бы:

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> table { border-collapse: collapse; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

: