Colspan of css display table did not work [duplicate] - html

Question

This question already has answers here:
HTML colspan in CSS
(16 answers)
Closed 3 years ago.
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

Answer 1

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.

Answer 2

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.

Answer 3

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/

Answer 4

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>