DIV table colspan: как?

Как мне достичь поведения colspan/rowspan в таблице без таблиц (например, div.table {display: table;} div.tr {display: table-row;} etc.)?

Ответ 1

Я бы предположил, что это будет охватываться CSS Tables, спецификация, которая, хотя упоминается на странице CSS, в настоящее время находится в состояние "еще не опубликовано в какой-либо форме"

В практическом плане вы не можете достичь этого в настоящее время.

Ответ 2

вы можете просто использовать два табличных divs, например:

<div style="display:table; width:450px; margin:0 auto; margin-top:30px; ">
  <div style="display:table-row">
    <div style="width:50%">element1</div>
    <div style="width:50%">element2</div>
  </div>
</div>
<div style="display:table; width:450px; margin:0 auto;">
  <div style="display:table-row">
    <div style="width:100%">element1</div>
  </div>
</div>

Ответ 3

Итак, вы превратили все элементы <table>, <tr> и <td> в элементы <div> и создали их так же, как и исходные элементы таблицы, которые они заменили?

Какой смысл в этом?

Похоже, кто-то сказал вам, что вы не должны использовать таблицы в современном веб-дизайне, что является правильным, но не таким образом - то, что вы сделали, ничего не меняет о вашем коде. Он, конечно, не избавился от стола; это просто усложняло чтение.

Истинный смысл точки не использовать таблицы в современных сайтах - это добиться желаемого макета страницы без использования методов макета, которые включают в себя установку сетки ячеек таблицы.

Это достигается с помощью стилей position и стилей float, а также ряда других, но, конечно, не display:table-cell; и т.д. Все это может быть достигнуто без необходимости использования пакетов colspans или rowspans.

С другой стороны, если вы пытаетесь разместить фактический блок табличных данных на странице - например, список товаров и цен в корзине покупок или набор статистических данных и т.д., то таблица все еще остается правильное решение. Таблицы не удалялись из HTML, потому что они по-прежнему актуальны и по-прежнему полезны. Дело в том, что их можно использовать, но только в тех местах, где вы фактически показываете таблицу данных.

Короткий ответ на ваш вопрос: я не думаю, что вы можете - colspan и rowspan быть конкретными для таблиц. Если вы хотите продолжить использовать их, вам нужно будет использовать таблицы.

Если ваш макет страницы таков, что он опирается на таблицы, на самом деле нет смысла делать упор на дому, чтобы избавиться от элементов таблицы, не перерабатывая, как выполняется макет. Он ничего не добивается.

Надеюсь, что это поможет.

Ответ 4

Попытка мыслить в стиле без табличек не означает, что вы не можете использовать таблицы:)

Только вы можете думать, что табличные данные могут быть представлены в таблице, а другие элементы (в основном div) используются для создания макета страницы.

Итак, я должен сказать, что вам нужно прочитать некоторую информацию о стилизации с помощью div-элементов или использовать эту страницу как хорошая страница примера!

Удачи;)

Ответ 5

Вы всегда можете использовать CSS, чтобы просто настроить ширину и высоту тех элементов, которые вы хотите сделать colspan и rowspan, а затем просто опустить отображение перекрывающихся DIV. Например:

<div class = 'td colspan3 rowspan5'> Some data </div>

<style>

 .td
 {
   display: table-cell;
 }

 .colspan3
 {
   width: 300px; /*3 times the standard cell width of 100px - colspan3 */
 }

 .rowspan5
 {
   height: 500px; /* 5 times the standard height of a cell - rowspan5 */
 }

</style>

Ответ 6

Чтобы получить функциональность "colspan" из табличного макета div, вам нужно отказаться от использования дисплея: table | display: стили строк. Особенно в тех случаях, когда каждый элемент данных охватывает более одной строки, и вам нужны разные ячейки в каждой строке.

Ответ 7

Я достиг этого, разделив их на разные, например:

<div class="table">
  <div class="row">
    <div class="col">TD</div>
    <div class="col">TD</div>
    <div class="col">TD</div>
    <div class="col">TD</div>
    <div class="col">TD</div>
  </div>
</div>
<div class="table">
  <div class="row">
    <div class="col">TD</div>
  </div>
</div>

или вы можете определить разные классы для каждой таблицы

<div class="table2">
  <div class="row2">
    <div class="col2">TD</div>
  </div>
</div>

С точки зрения пользователя они ведут себя одинаково.

Конечно, он не решает все проблемы colspan/rowspan, но он отвечает на мою потребность в времени.

Ответ 8

<div style="clear:both;"></div> - может сделать трюк в некоторых случаях; а не "colspan", но может помочь достичь того, что вы ищете...

<div id="table">
    <div class="table_row">
        <div class="table_cell1"></div>
        <div class="table_cell2"></div>
        <div class="table_cell3"></div>
    </div>
    <div class="table_row">
        <div class="table_cell1"></div>
        <div class="table_cell2"></div>
        <div class="table_cell3"></div>
    </div>

<!-- clear:both will clear any float direction to default, and
prevent the previously defined floats from affecting other elements -->
    <div style="clear:both;"></div>

    <div class="table_row">
<!-- the float is cleared, you could have 4 divs (columns) or
just one with 100% width -->
        <div class="table_cell123"></div>
    </div>
</div>

Ответ 9

column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm

Ответ 10

вы просто используете: nth-child (num) в css для добавления colspan, например

 <style>
 div.table
  {
  display:table;
  width:100%;
  }
 div.table-row
  {
   display:table-row;
  }
 div.table-td
 {
  display:table-cell;
 }
 div.table-row:nth-child(1)
 {
  display:block;
 }
</style>
<div class="table>
    <div class="table-row">test</div>
    <div class="table-row">
      <div class="table-td">data1</div>
      <div class="table-td">data2</div>
    </div>
</div>

Ответ 11

Вы можете сделать это (где data-x имеет соответствующий дисплей: xxxx установлен):

<!-- TH -->
<div data-tr>
    <div data-th style="width:25%">TH</div>
    <div data-th style="width:50%">

         <div data-table style="width:100%">
             <div data-tr>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
             </div>
         </div>

    </div>
    <div data-th style="width:25%">TH</div>
</div>


<!-- TD -->
<div data-tr>
    <div data-td style="width:25%">TD</div>
    <div data-th style="width:50%">

         <div data-table style="width:100%">
             <div data-tr>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
             </div>
             <div data-tr>
                 ...
             </div>
         </div>

    </div>
    <div data-td style="width:25%">TD</div>
</div>