Colspan of css display table did not work

Question

I have already tired to fix the colspan in the display table in CSS.

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

.table-row {
  display: table-row;
  border-collapse: collapse;
}

.table-cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

.table-row.colspan {
  display: block;
}
.table-row.colspan .table-cell {
  display: block;
  width: 200%;
  box-sizing: border-box;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      top left cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
  </div>
</div>

How can I take the colspan behavior of the second row in the table? Thanks in advance.

https://codepen.io/mdshohelrana/pen/WNNxBqP

@blurryfaceblueberry, Both are not the same. Please see the whole problem then and write the comment. — Shohel, Oct 17 '19 at 05:45
@connexo, Our company has taken a decision that uses div table. — Shohel, Oct 17 '19 at 12:20
@Hardik's, here is the complete solution https://codepen.io/mdshohelrana/pen/ZEEOdOb — Shohel, Oct 17 '19 at 16:07

score 3 · Answer 1 · answered Oct 17 '19 at 06:51

What do you mean with "colspan behaviour"?

It's not possible to reproduce the HTML colspan attribute in tables in CSS und display: table-*, because it's a structural thing not a style thing. Plus colspan requires a number parameter to determine the number of columns to span, which you don't have.

What are you trying to do anyway? If you want to use a table (for tabular data) then use HTML table/tr/td elements and the colspan attribute.

If you want to have a table like (page) layout, then you should be using css grid with which you can do colspan-like designs.

In any case you shouldn't be alot of divs and using class names such as table-row/celletc. Class names should semantically describe the content not the look of elements.

@Shohel Great. Unfortunatly the update doesn't address my questions/remarks. — RoToRa, Oct 17 '19 at 08:37

rey · Answer 2 · 2019-10-17T05:50:15.857

The issue was discussed here

There is no simple CSS property that we can provide for colspan (As far as I know). I think using table tag is more efficient and understandable.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

https://www.w3schools.com/tags/att_td_colspan.asp You can refer here.

Taha Paksu · Answer 3 · 2019-10-17T09:16:37.807

I could simulate a hack with setting float and width. Maybe it can be used in your design. But I'm not sure if it'll work the same on all platforms. Adding a width to the whole table and setting the colspan width the same with the table would be a bit more secure for this. Updated the answer with the width set.

The important part for width's to match is the box-sizing: border-box setting. As it would differ the gaps between two cells and one cell in a row, this should be set.

.table {
  display: table;
  table-layout: fixed;
  width: 600px;
  border-collapse: collapse;
  box-sizing: border-box;
}

.table-row {
  display: table-row;
  border-collapse: collapse;
  box-sizing: border-box;
}

.table-row.colspanned
{
  float: left;
  margin: -1px 0;
  width: 600px;
}

.table-cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
  box-sizing: border-box;
}

.table-cell.colspan {
  margin-top: -1px;
  margin-bottom: -1px;  
  width: 200px !important;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      top left cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
  </div>
  <div class="table-row colspanned">
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
  </div>
</div>

Ok but nothing changes, just specify the width of the cells to `total width / 3`. The main idea is the same. — Taha Paksu, Oct 17 '19 at 09:01

score 1 · Answer 4 · answered Oct 17 '19 at 05:58

1

Well you can solve it by two approaches:

Use display:table-row-group and then for cell specify display:table-caption. but I am struggling with setting border on right side in this case. Fiddle for same is below:

http://jsfiddle.net/hsbokxv4/

You can manipulate using javascript. Fiddle is below (Though I am not fan of this approach):

http://jsfiddle.net/emilianolch/5nvxv5ko/

answered Oct 17 '19 at 05:58

Vinay Prajapati

7,199
9
45
86

Updated my code snippet. – Shohel Oct 17 '19 at 08:27

Colspan of css display table did not work

4 Answers4