Как объединенить ячейки аля rowspan=2 таблицы, сверстанной div ами в bootstrap?

Question

[Александр Плюснин]

Здравствуйте, уже весь мозг сломал как в этой таблице bootstrap , сверстанной div ами объединить "ячейка 1" и "ячейка 1" в одну.



код:

<div class container>
    <div class="row"> 
<div class="col-sm-12">
    <div class="col-sm-5"><p>ячейка 1</p></div>
    <div class="col-sm-2"><p>Интернет</p></div>
    <div class="col-sm-2"><p>200 рублей</p></div>
    <div class="col-sm-3"><p>Абоненская плата</p></div>

    <div class="col-sm-5"><p>ячейка 1</p></div>
    <div class="col-sm-2"><p>1,5 Гб</p></div>
    <div class="col-sm-2"><p>250 рублей</p></div>
    <div class="col-sm-3"><p>Авансовый платеж</p></div>


    <div class="col-sm-7"><p>Стоимость звонков указана с НДС за минуту.</p></div>
    <div class="col-sm-5"><p>SMS Сообщения</p></div>


    <div class="col-sm-5"><p>Входящие вызовы</p></div>
    <div class="col-sm-2"><p>0 р</p></div>
    <div class="col-sm-3"><p>Со 2-го в сутки</p></div>
    <div class="col-sm-2"><p>0 р</p></div>


    <div class="col-sm-5"><p>"Исходящие-местные абоненты "</p></div>
    <div class="col-sm-2"><p>0 р</p></div>
    <div class="col-sm-3"><p>Россия</p></div>
    <div class="col-sm-2"><p>0,85 р</p></div>

......................и т. д.

Comments

[Алексей Уколов]

Зачем стрелять себе в ногу? Таблицы нужно верстать таблицами, тем более, что у вас тут ни о какой адаптивности речи не идет.

[Александр Плюснин]

Алексей Уколов: да код не дописан, но дело в том что таблица только до 768, дальше горизонтальная прокрутка, мне потом div`ы в один столбик сложить нужно

[Faber Estello]

Александр Плюснин: а переписать html под себя - не вариант?!

[Максим Дунаевский]

Поставить у контейнера таблицы свойство overflow: auto ещё не предлагали?

Answer 1

[Karen Kratyan]

Через col-sm-offset-5 пробовали?

<div class="col-sm-5"><p>ячейка 1</p><p>ячейка 1</p></div>

<div class="col-sm-2 col-sm-offset-5"><p>1,5 Гб</p></div>

Answer 2

[Денис Инешин]

Никак, можно только эмулировать. Подробнее тут: stackoverflow.com/questions/9277661/colspan-rowspa...

Answer 3

[Юрий]

дожили... теперь даже таблицы дивами верстают ;)
таблица все равно не должна ломаться на маленьких экранах

Comments

[Дмитрий Королёв]

Почему ж дожили? Наоборот, уже давно вроде как отжили. Мания не использовать таблицы вообще ни в каких ситуациях появилась сразу после появления блочной верстки и за несколько лет сошла на нет. Но, как видно, иногда еще всплывает...

Answer 4

[wintermoon]

Примерчик. Абсолютом можно сыграть с помощью 2-х доп. классов www.sitepoint.com/rowspans-colspans-in-css-tables

Answer 5

[Александр Плюснин]

Всем огромное спасибо за помощь. Решил все таки, что работодателя проще уболтать, чем div ами верстать таблицу) Сделал table-fluid за 20 мин и плюнул