2

Есть вот такая верстка, это таблица в которой ячейки раскрашенные в шахматном порядке. Все бы ничего, но мне надо первую ячейку сделать 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>

1
  • Добавь colspan=2 к этой ячейке и удали следующую за ней ячейку
    – diralik
    10 окт 2017 в 20:26

1 ответ 1

3

Что - то такое?

*{
	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 colspan="2"><p>Блоки обучения</p></td>
        <td style="display:none;"></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>

3
  • Странно у вас работает, а я только что поправил у себя, и у меня опять сбивается
    – Swartex
    10 окт 2017 в 20:31
  • А теперь работает?
    – user245150
    10 окт 2017 в 20:33
  • да, работает спасибо!
    – Swartex
    10 окт 2017 в 20:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.