Есть вот такая верстка, это таблица в которой ячейки раскрашенные в шахматном порядке. Все бы ничего, но мне надо первую ячейку сделать rowspan="2"
. Когда я так делаю то вся таблица сдвигается, пробовал удалять соседнюю ячейку, но потом цвета сбиваются. Подскажите как это реализовать?
*{
margin: 0;
padding: 0;
}
body{
}
.container{
width: 1170px;
margin: 0 auto;
}
.shahmatka{
background-color: #eefaf9;
}
td{
width: 168px;
height: 168px;
}
/*вот так сделал шахматную доску :) */
tr:first-child td:nth-child(odd){
border: 1px solid #44c3be;
background: #0cb1aa;
}
tr:nth-child(2) td:nth-child(even){
border: 1px solid #a7e3e0;
background: #0cb1aa;
}
tr:nth-child(3) td:nth-child(odd){
border: 1px solid #44c3be;
background: #0cb1aa;
}
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<table cellspacing="0" cellpadding="0" class="shahmatka">
<tr>
<td><p>Блоки обучения</p></td>
<td></td>
<td><p>АРТ</p></td>
<td></td>
<td><p>СПОРТ</p></td>
<td></td>
<td><p>STEM</p></td>
</tr>
<tr>
<td></td>
<td><p>Гуманитарный блок</p></td>
<td></td>
<td><p>ІТ</p></td>
<td></td>
<td><p>МЕДИА</p></td>
<td></td>
</tr>
<tr>
<td><p>PERFOMANS</p></td>
<td></td>
<td><p>ПОЛИГЛОТ</p></td>
<td></td>
<td><p>БИЗНЕС</p></td>
<td></td>
<td><p>СОЦИАЛЬНАЯ ОТВЕТСТВЕННОСТЬ</p></td>
</tr>
</table>
</div>
</body>
</html>
colspan=2
к этой ячейке и удали следующую за ней ячейку