How Can Display Table-Row Behave Like Colspan=3

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>

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

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/

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.

How can i fix this colspan issue?

Instead of using divs you can use the table element along side <tr> and <td> then you can use the colspan="2" attribute to make that one cell occupy two spots:

* {
  box-sizing: border-box;
}

.divTable {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.tHead {
  display: table-header-group;
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}

.tBody {
  display: table-row-group;
  font-weight: bold;
  font-size: 25px;
}

.tFooter {
  display: table-footer-group;
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}

.tr {
  display: table-row;
  font-weight: bold;
  font-size: 25px;
}

.td,
.th {
  display: table-cell;
  padding: 10px;
  text-align: center;
  font-size: 22px;
  word-wrap: break-word;
}

.td {
  font-weight: bold;
}

.colspan {
  background: beige;
  text-align: center;
}

.check {
  color: limegreen;
  font-size: 30px;
}

.remove {
  color: red;
  font-size: 30px;
}

.th:first-child,
.td:first-child {
  font-weight: bold;
  color: black;
}

@media screen and (max-width: 768px) {
  .check {
    color: limegreen;
    font-size: 20px;
  }
  .remove {
    color: red;
    font-size: 20px;
  }
  .tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .td,
  .th {
    display: block;
    width: 33.333333333333%;
    font-size: 20px;
  }
  .th:first-child,
  .td:first-child {
    background: #efefef;
    width: 100%;
  }
  .th:first-child {
    display: none;
  }
  .colspan {
    width: 100%;
  }
}

<table class="divTable">
  <thead class="tHead">
    <tr class="tr">
      <td class="th"> </td>
      <td class="th">Header 1</td>
      <td class="th">Header 2</td>
    </tr>
  </thead>
  <tbody class="tBody">
    <tr class="tr newtest">
      <td class="td">Feature 1</td>
      <td colspan="2" class="td check colspan">✔</td>
    </tr>
    <tr class="tr">
      <td class="td">Feature 2</td>
      <td class="td remove">x</td>
      <td class="td check">✔</td>
    </tr>
    <tr class="tr">
      <td class="td">Feature 3</td>
      <td class="td remove">x</td>
      <td class="td remove">x</td>
    </tr>
    <tr class="tr">
      <td class="td">Feature 4</td>
      <td class="td remove">x</td>
      <td class="td remove">x</td>
    </tr>
  </tbody>
  <tfoot class="tFooter">
    <tr class="tr">
      <td class="td"> </td>
      <td class="td">Footer 1</td>
      <td class="td">Footer 2</td>
    </tr>
  </tfoot>
</table>

---

Related Topics