Как перевести из table colspan="4" в css?

Question

[Therapyx]

Всем привет, такая вот проблема. Надо переделать структуру table - tr - td в css на дивах. Как сделать в css аналог colspan'a, чтобы 1 строка была в ширину на всю таблицу? Для наглядности сделал пэинт мастеринг :)

<div class="row" style="Собственно что надо дописать сюда?">
       <div class="column" style="Или сюда?">
             Angaben zur Kontaktperson<br /><br />
       </div>
</div>

p.s. width пробовал засовывать во все щели, это не пашет.

вот кстати css код

.table {
     display: table;
     table-layout: auto;
}
.row {
      display: table-row;           
}
.column {
      display: table-cell;
      vertical-align: top;
      padding:5px;
}

Answer 1

[Евгений Петров]

Никак. Не путайте структуру и визуализацию. Это как спрашивать — можно ли в CSS задавать action у form или for у label.
А в вашем случае можно совсем обойтись без таблицы.

Comments

[Therapyx]

ну я думал, что те, кто мне "сможет" помочь, знает об обычной табличной структуре в дивах. Она везде одинакого прописана в css с диспеем-тейбл, дисплеем-роу, дисплеем-целл.
Обойтись то можно только вот у меня там еще таких страниц 100, и где-то есть таблицы, а где то нет. И чтобы быстро это все сделать. Мне нужна такая структура, по которой я буду постоянно копи пейст делать) Ежели для каждой страницы что-то новое обдумывать

[Евгений Петров]

Therapyx: Вам именно в этом макете не нужно display:table. И ещё раз — никак вы не сможете полноценно заменить таблицы со сложной структурой.
Но вынуть элементы из нормального потока, всё же, возможно jsfiddle.net/petroveg/o0wj1xjx

[Therapyx]

Евгений Петров: во, огромнео спасибо ))

Answer 2

[Владимир Голубев]

<div class="row" style="width: 100%;">
       <div class="column fullSize" style="width: 100%">
              Angaben zur Kontaktperson<br /><br />
       </div>
</div>
<div class="row" style="width: 100%;">         
      <div class="column halfSize" style="width: 50%;">
            Обычные колонки
       </div>
       <div class="column halfSize" style="width: 50%;">
            Обычные колонки
       </div>
</div>

Как-то так может быть? Вообще, для этого есть готовые решения в том же bootstrap, но если хочется создавать свой велосипед, почему бы и нет)

Comments

[Therapyx]

да можно и так, но как я уже выше написал в комменте)) "Обойтись то можно только вот у меня там еще таких страниц 100, и где-то есть таблицы, а где то нет. И чтобы быстро это все сделать. Мне нужна такая структура, по которой я буду постоянно копи пейст делать) Ежели для каждой страницы что-то новое обдумывать". И для полного блаженства мне мешает 1 эта сраная функция в этих таблицах. Это имитация colspan.... Обыскал уже весь инет, голяк )
Для более детального описания... Есть проэкт на 100-150 страниц, ими пользуются. Надо переделать все так, чтобы клиенты даже и не заметили этого. Т.е. сделать полностью идеентичным, только слезть с этих table tr td xD

[Владимир Голубев]

Therapyx: Я правильно понимаю, что вы хотите сделать так, чтобы необходимость колспана определялась автоматически, и не нужно было ничего добавлять в код типа новых классов?

[Therapyx]

Владимир Голубев: необходимость новых классов я уже избежал, создав всего 3 ) Маленькие недочеты можно дописывать в style. Как на скрине показано идет таблица к примеру с х строками и 2 столбцами, дак вот каждая строка делится на 2 столбца и из всей этой таблицы надо сделать так, чтоб 1 из строк была на 2 столбца как full width. С обычной table смехой это правится легко colspan i rowspan. А с моим подходом совсем не выходит так сделать )

[Владимир Голубев]

Therapyx: Ну, я же не знаю как у вас реализованы стили для уже имеющихся классов... Поскольку править всё равно придётся что-либо, проще всего создать новый класс fullWidthColumn и прописать для него те же правила css что и для column с небольшими отличиями.

[Merk47]

Владимир Голубев, bootstrap не универсальная и устаревшая технология. Предлагать переводить все проекты на bootstrap только потому-что он нравится - плохая идея. Если не знаете, лучше ничего не писать.

[Владимир Голубев]

Merk47, Не универсальная - да, устаревшая - нет, с чего вы взяли? Ни три года назад не была устаревшей, ни сегодня. Да и не технология это, а css фрэймворк. И я не призывал переводить все проекты на него, всего лишь упомянул, что в нём эта проблема решена из коробки.