Как сделать адаптивно блок с таблицей?

318

14 октября 2017, 18:30

Есть вот такая шахматная верстка, хочу сделать адаптивность, можно с использованием Bootstrap. Но когда дошло до адаптивности я ума не приложу как это сделать, ведь в trя не могу вставить <div class="row"></div>. Мне кажется что я не правильно сделал эту верстку с шахматными блоками. Прошу вашего совета.

*{ 
	margin: 0; 
	padding: 0; 
} 
body{ 
	font-family: Calibri; 
	font-size: 18px; 
} 
 
.wrapper{ 
	width: 1170px; 
	margin: 0 auto; 
	background-color: #eefaf9; 
} 
/*.shahmatka{ 
	background-color: #eefaf9; 
}*/ 
.shahmatka td{ 
	width: 168px; 
	height: 168px; 
	vertical-align: top; 
} 
.shahmatka .item{ 
	padding-left: 17px; 
	padding-top: 30px; 
	color: #fff;	 
} 
.img{ 
	width: 168px; 
	height: 168px; 
	background-position: center; 
	background-repeat: no-repeat; 
} 
/*вот так сделал шахматную доску :) */ 
.shahmatka tr:first-child td:nth-child(odd){ 
	border: 1px solid #44c3be; 
	background: #0cb1aa; 
} 
.shahmatka tr:nth-child(2) td:nth-child(even){ 
	border: 1px solid #44c3be; 
	background: #0cb1aa; 
} 
.shahmatka tr:nth-child(3) td:nth-child(odd){ 
	border: 1px solid #44c3be; 
	background: #0cb1aa; 
} 
.shahmatka .info{ 
	background: #14cac2 !important; 
	color: black !important; 
	vertical-align: top; 
	font-size: 45px; 
	font-weight: bold; 
	padding-left: 51px; 
	padding-top: 10px; 
} 
/*Блок растянутый в таблице*/ 
.shahmatka .title{ 
	height: 150px; 
	background-color: #04726d; 
	display: table-cell; 
	vertical-align: middle; 
} 
.block-center { 
	box-sizing: border-box; 
	display: flex; 
	width: 1170px; 
	flex-direction: row; 
	justify-content: center; 
	align-items: center; 
	align-content: center; 
	padding: 51px; 
	background: #04726d; 
	color: #ffffff; 
	height: 150px; 
}

<div class="wrapper"> 
		<table cellspacing="0" cellpadding="0" class="shahmatka"> 
			<div class="row"> 
				<tr> 
				<td colspan="2" class="info"><p>Блоки обучения</p></td> 
        <td style="display:none;"></td> 
				<td><p class="item">АРТ</p></td> 
				<td class="img" style="background-image: url('./img/img2.png')"></td> 
				<td><p class="item">СПОРТ</p></td> 
				<td class="img" style="background-image: url('./img/img3.png')"></td> 
				<td><p class="item">STEM</p></td> 
			</tr> 
			</div> 
			<tr> 
				<td></td> 
				<td><p class="item">Гуманитарный блок</p></td> 
				<td class="img" style="background-image: url('./img/img4.png')"></td> 
				<td><p class="item">ІТ</p></td> 
				<td class="img" style="background-image: url('./img/img5.png')"></td> 
				<td><p class="item">МЕДИА</p></td> 
				<td class="img" style="background-image: url('./img/img6.png')"></td> 
			</tr> 
			<tr> 
				<td><p class="item">PERFOMANS</p></td> 
				<td class="img" style="background-image: url('./img/img1.png')"></td> 
				<td><p class="item">ПОЛИГЛОТ</p></td> 
				<td class="img" style="background-image: url('./img/img7.png')"></td> 
				<td><p class="item">БИЗНЕС</p></td> 
				<td class="img" style="background-image: url('./img/img8.png')"></td> 
				<td><p class="item">Социальная ответственность</p></td> 
			</tr> 
		</table> 
	</div>

Answer 1

Без media queris сложно будет её адаптировать .. собственно там всего одну цифру поменять , смотрите ...

1 вариант ...

html, 
body { 
  height: 100%; 
} 
 
#table { 
  width: 100%; 
  height: 100%; 
} 
 
.a { 
  background: red; 
} 
 
.b { 
  background: blue; 
} 
 
.c { 
  background: green; 
} 
 
.e { 
  background: pink; 
} 
 
.grid { 
  width: 50%; 
  height: auto; 
  position: relative; 
  margin: auto 
} 
 
.grid:after { 
  content: ""; 
  display: block; 
  padding-top: 100%; 
} 
 
.content { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: blue; 
}

<div class="grid"> 
  <div class="content"> 
 
    <table id="table" cellspacing="0"> 
 
      <tr> 
        <td class="a" colspan="2"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
      </tr> 
 
      <tr> 
        <td class="c"></td> 
        <td class="b"></td> 
        <td class="c"></td> 
        <td class="e"></td> 
      </tr> 
 
      <tr> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="e"></td> 
        <td class="a"></td> 
      </tr> 
 
      <tr> 
        <td class="c"></td> 
        <td class="e"></td> 
        <td class="b"></td> 
        <td class="e"></td> 
      </tr> 
 
 
    </table> 
 
  </div> 
</div>

2 вариант , такой какой надо ?

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
} 
 
#table { 
  width: 100%; 
  height: 100%; 
} 
 
table, 
tr, 
td { 
  border: 1px solid transparent; 
  padding: 0; 
  border-collapse: collapse; 
} 
 
.a { 
  background: lightgreen; 
} 
 
.b { 
  background: #fff; 
} 
 
.c { 
  background: lightgreen; 
  filter: brightness(60%); 
} 
 
.box { 
  width: 80%; 
  height: auto; 
  margin: auto; 
  position: relative; 
} 
 
.box:before { 
  content: ""; 
  display: block; 
  padding-top: 40%; 
} 
 
.content { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background: #fff; 
}

<div class="box"> 
  <div class="content"> 
    <table id="table"> 
      <tr> 
        <td colspan="2" class="c"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
      </tr> 
      <tr> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
      </tr> 
      <tr> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
        <td class="b"></td> 
        <td class="a"></td> 
      </tr> 
    </table> 
  </div> 
</div>