Поему не появляются border's в рядах таблицы?

224

11 марта 2019, 03:40

table { 
  border: 2px solid red; 
  border-spacing: 0px 20px; 
} 
 
tr { 
  border: 1px solid red; 
}

<table> 
  <tr> 
    <th rowspan='3'>lorem</th> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
</table>

Answer 1

Существуют две различные модели у таблиц: ( separate и collapse ). Они служат для установки поведения границ в ячейках таблицы в CSS.

По-умолчанию используется separate:

table { 
  border-collapse: separate; 
}

В этой модели тег <tr> не может иметь границ и будет игнорироваться браузерами. Решением для данной модели таблицы - это использование стилей для тегов <td> и <th>, которые будут находиться внутри тега <tr>.

  <tr>
    <th>lorem</th>
    <td>lorem</td>
  </tr>

Так же вы можете установить поведение таблицы в collapse:

table { 
  border-collapse: collapse; 
}

Это позволит вам стилизовать тег <tr> как вам хочется.

Данный вопрос уже поднимался тут на stackoverflow.

Ниже представлен ваш код в исполнении каждой из моделей поведения таблицы:

table, td, th { 
border: 2px solid red; 
} 
#table-separate { 
  border-collapse: separate; 
} 
#table-collapse { 
  border-collapse: collapse; 
}

<h3>table-collapse</h3> 
	<table id=table-collapse> 
  <tr> 
    <th rowspan='3'>lorem</th> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
</table> 
 
<h3>table-separate</h3> 
	<table id=table-separate> 
  <tr> 
    <th rowspan='3'>lorem</th> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
  <tr> 
    <th>lorem</th> 
  </tr> 
</table>