Table-Cell - Some Kind of Colspan

Using display: table-cell is there a way of getting the colspan functionality?

No you cannot add colspan or rowspan to display:table-cell. It is one of the limitations in table-cell feature!

You can check the limitations in this reference link

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

If you want to bring the COLSPAN feature into table-cell, then you have to use table-row-group and table-caption feature as follows

display: table-caption

and

table-row-group;

Check this fiddle link : http://jsfiddle.net/ZQQY4/

Colspan/Rowspan for elements whose display is set to table-cell

As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

How can display table-row behave like colspan=3

Using display: table; it cannot be done (cause sadly there's no colspan: 3; or rowspan property in CSS, therefore stylesheet is unable to mimick a real <table> element)

but hey, flex to the rescue!

.row{

  display: flex;

  flex-flow: wrap;

}

.cell{

  width: 25%;

  background:#eee;

}

.colspan2{

  flex: 2;

}

<div class="row">

  <div class="cell">Cell1</div>

  <div class="cell">Cell2</div>

  <div class="cell">Cell3</div>

  <div class="cell">Cell4</div>

  <div class="cell">Cell5</div>

  <div class="cell colspan2">Cell6 Colspan2</div>

  <div class="cell">Cell7</div>

</div>

DIV table colspan: how?

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.

Table-cell with colspan inbetween rows

You may try some workaround to create the illusion of having colspan/rowspan since there is no implementation for them with display:table:

#table {

  display: table;

}

.group {

  display: table-row-group;

}

.row,

.caption {

  display: table-row;

}

.cell {

  display: table-cell;

  border: 1px solid grey;

  padding: 5px

}

.caption>.cell {

  border-right: none;

  border-left: none;

}

.caption>.cell:last-child {

  border-right: 1px solid grey;

}

.caption>.cell:first-child {

  border-left: 1px solid grey;

}

<div id="table">

  <div class="group">

    <div class="row">

      <div class="cell">525234234234</div>

      <div class="cell ">41414124124</div>

      <div class="cell ">13123123</div>

    </div>

    <div class="caption">

      <div class="cell">Hi</div>

      <div class="cell "></div>

      <div class="cell "></div>

    </div>

  </div>

  <div class="group">

    <div class="row">

      <div class="cell">525234234234</div>

      <div class="cell ">41414124124</div>

      <div class="cell ">13123123</div>

    </div>

  </div>

  <div class="group">

    <div class="row">

      <div class="cell">525234234234</div>

      <div class="cell ">41414124124</div>

      <div class="cell ">13123123</div>

    </div>

  </div>

</div>

HTML split table cell instead of using colspan

One Way:

You can user rowspan="2" on all other cells in the same row

Example:

<table border="1" width="100%">
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td rowspan="2"> </td>
        <td> </td>
        <td rowspan="2"> </td>
    </tr>
    <tr>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

here is an EXAMPLE

Another Way

inside the cell you put two divs and use css to style it

HTML:

<table border="1" width="100%">
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td>
            <div class="top">Top</div>
            <div class="bottom">bottom</div>
        </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

CSS:

.top{
    background-color: #eee;
    border-bottom: 1px solid #000;
}
.bottom{
    background-color: #ccc;
}

and you can see an EXAMPLE HERE

---

Related Topics