DIV table colspan: how?

Question

How do I achieve colspan/rowspan behavior in tableless (e.g. div.table {display: table;} div.tr {display: table-row;} etc.) table?

Answer 1

I would imagine that this would be covered by CSS Tables, a specification which, while mentioned on the CSS homepage, appears to currently be at a state of "not yet published in any form"

In practical terms, you can't achieve this at present.

Answer 2

you can simply use two table divs, for instance:

<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>

works great!

Answer 3

So basically, you've turned all your <table>, <tr> and <td> elements into <div> elements, and styled them to work exactly like the original table elements they've replaced?

What's the point in that?

It sounds like someone's told you that you shouldn't be using tables in modern web design, which is sort of right, but not in this way -- what you've done doesn't actually change anything about your code. It certainly hasn't got rid of the table; it's just made it harder to read.

The true meaning of the point about not using tables in modern sites is to achieve the page layout you want without using the kind of layout techniques that involve setting out a grid of table cells.

This is achieved by using position styles and float styles, and a number of others, but certainly not display:table-cell; etc. All of this can be achieved without ever needing colspans or rowspans.

On the other hand, if you are trying to place an actual block of tabular data on the page - for instance a list of items and prices in a shopping basket, or a set of statistics, etc, then a table is still the correct solution. Tables were not removed from HTML, because they are still relevant and still useful. The point is that it is fine to use them, but only in places where you are actually display a table of data.

The short answer to your question is I don't think you can -- colspan and rowspan are specific to tables. If you want to carry on using them, you will need to use tables.

If your page layout is such that it relies on tables, there really isn't any point doing a half-way house effort to get rid of the table elements without reworking how the layout is done. It doesn't achieve anything.

Hope that helps.

Answer 4

You could always use CSS to simply adjust the width and the height of those elements that you want to do a colspan and rowspan and then simply omit displaying the overlapped DIVs. For example:

<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>

Answer 5

Trying to think in tableless design does not mean that you can not use tables :)

It is only that you can think of it that tabular data can be presented in a table, and that other elements (mostly div's) are used to create the layout of the page.

So I should say that you have to read some information on styling with div-elements, or use this page as a good example page!

Good luck ;)

Answer 6

In order to get "colspan" functionality out of div based tabular layout, you need to abandon the use of the display:table | display:row styles. Especially in cases where each data item spans more than one row and you need different sized "cells" in each row.

Answer 7

<div style="clear:both;"></div> - may do the trick in some cases; not a "colspan" but may help achieve what you are looking for...

<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>

Answer 8

I've achieved this by separating them in different , e.g.:

<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>

or you can define different classes for each tables

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

From the user point of view they behave identically.

Granted it doesn't solve all colspan/rowspan problems but it does answer my need of the time.

Answer 9

you just use the :nth-child(num) in css for add the colspan like

 <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>

Answer 10

You can use Normal TR, TD and use colspan in td, It works as a hack.

Answer 11

You can do this ( where data-x has the appropriate display:xxxx set ):

<!-- 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>