Как в Bootstrap 3 сделать rowspan

При создании того или иного сайта, разработчики часто сталкиваются с табличной разметкой. В верстке такой вопрос возможно решить как таблицами, так и блоками, указав <div>‘ам отображение таблицей. Однако, есть и ограничения, при которых использование <div>‘ов становится невозможным. У элементов таблицы <td> существуют такие атрибуты как colspan и rowspan, которые невозможно перенести на верстку блоками.

Но в некоторых случаях мы можем исхитриться и все таки добиться эффекта rowspan и colspan. Для этого необходимо добавить несколько дополнительных элементов, или «перевернуть» таблицу, чтобы столбцы стали строками, а строки ячейками столбцов — в таком случае мы реализуем rowspan.

При разработке данной странички я использовал Bootstrap 3 (HTML, CSS и Javascript фреймворк). До сих пор, к сожалению, не понимаю преимуществ данного фреймворка, кроме, пожалуй, симпатичного оформления формочек, сброса стилей и установки общего вида для всех браузеров и платформ. Еще пожалуй можно выделить адаптивность дизайна.

Конечно удобно, когда уже реализованы некоторые вещи, но у каждого проекта свои нужды — где-то использование форм, где-то адаптивность специфическая, по этому я все еще сомневаюсь в правильности использования Bootstrap. Если у вас иное мнение — буду рад его узнать — пишите в комментариях.

Итак, как же создать rowspan в таблице Bootstrap? Разделите вашу таблицу не по строкам, как вы привычно это делаете а по столбцам. Пример, как бы выглядела таблица если бы мы использовали <table>:

<table>
	<tr>
		<td>11</td>
		<td rowspan="6">2x</td>
		<td>31</td>
	</tr>
	<tr>
		<td>21</td>
		<td>32</td>
	</tr>
	<tr>
		<td>31</td>
		<td>33</td>
	</tr>
	<tr>
		<td>41</td>
		<td>34</td>
	</tr>
	<tr>
		<td>51</td>
		<td>35</td>
	</tr>
	<tr>
		<td>61</td>
		<td>36</td>
	</tr>
</table>

Как мы видим таблица разделена по строкам и в каждой строке имеет по 2 эелемента, т.к. в первой строке у нас определен элемент с rowspan=6. Теперь мы, используя блочную верстку и стандартные классы Bootstrap «перевернем» таблицу и будем плясать от столбцов:

<div class="row">
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	11
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	21
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	31
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	41
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		51
  			</div>
  		</div>
   	</div>
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				2x
  			</div>
  		</div>
   	</div>
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				13
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		23
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		33
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				43
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		53
  			</div>
  		</div>
   	</div>
</div>

Как видите, теперь у нас одна строка, и в этой строке три столбца, а в них уже 5 элементов. Элементы остались на своих местах, и появился один высокий блок, который и реализует наш rowspan.

Если у вас есть еще идеи, как можно реализовать такой «костыль» — пишите в комментариях.
Всем удачной верстки.

Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла - поставь +1 и нажми "Мне нравится"!

(490 оценок, среднее: 4,90 из 5)

Tweet