How to apply css border-spacing to every other row? - html

I am building a css table using display: table that needs to satisfy two requirements
Bottom half of each row is custom content that spans full width of table
Visible margin between rows
I've tried messing with colspan and border spacing but haven't been able to make it work
Closest is using border-spacing and an additional table row, but I can't make the border-spacing only apply to every other row, and can't make my custom row full width of the table
<div class="table">
<div class="tr">
<div class="td">aaaa 1</div>
<div class="td">aaaa 2</div>
<div class="td">aaaa 3</div>
<div class="td">aaaa 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
.tr {
display: table-row;
box-shadow: 0px 5px 12px red;
background-color: $white;
}
.td {
display: table-cell;
padding: 20px;
}
.extra-info {
display: table-cell;
height: 40px;
}
See https://codepen.io/joshuaohana/pen/VwzWbZp for non working example
I'd like to make the "extra row of info" in the codepen here
full width
connected to its row above so there's no margin or red border behind
How can I set this up with colspan or border-spacing or some other?


I am inserting another answer because I am unable to create a fiddle or codepen. So in this snippet, you can see that the margin is showing through the background, I suppose this is what you mean by that. I added another div, just above the table row, and included the extra-info in that div, and named it row1 and row 2 for each row and its extra-info. Now the key here is the display property "table-row-group" that allows us to cover row data and extra info in a div otherwise the width of the row is messed up. As for the spacing between the header and the rows+extra-info is concerned I "think" the best way is to use br below every div where you want to insert space.
.main{
margin: 20px;
border-collapse: separate;
}
.table {
display: table;
margin: auto;
width: 100%;
table-layout: auto;
}
.th {
display: table-row;
cursor: pointer;
}
.tr{
display: table-row;
cursor: pointer;
outline: 1px solid red;
}
.td {
display: table-cell;
text-align: left;
padding: 20px;
}
div .th {
outline: 2px solid black;
box-shadow: 0px 5px 12px black;
}
.extra-info{
display: table-row;
outline: 1px solid black;
height: 35px;
width: 100%;
}
.style{
color: black;
}
#row1{
display: table-row-group;
box-shadow: 0px 5px 12px black;
border-spacing: 0em 3rem;
}
#row2{
display: table-row-group;
box-shadow: 0px 5px 12px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="hw1.css">
</head>
<body>
<div class="main">
<div class="table">
<div class="th">
<div class="td">Heading 1</div>
<div class="td">Heading 2</div>
<div class="td">Heading 3</div>
<div class="td">Heading 4</div>
</div>
<br>
<div id="row1">
<div class="tr row">
<div class="td">aaaa 1</div>
<div class="td">aaaa 2</div>
<div class="td">aaaa 3</div>
<div class="td">aaaa 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
<br>
<div id="row2">
<div class="tr row">
<div class="td">bbbb 1</div>
<div class="td">bbbb 2</div>
<div class="td">bbbb 3</div>
<div class="td">bbbb 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
</div>
</body>
</html>


When you declare the width of the table the spacing between the table data is automatically calculated. You can make a div main to give it a box-shadow property. I have given a solid 1px black border to rows, if you want to give a border for columns you have to write the outline: 1px solid black in .td.
.main{
margin: 20px;
box-shadow: 0px 5px 12px red;
border-collapse: separate;
}
.table {
display: table;
margin: auto;
width: 100%;
table-layout: auto;
}
.th {
display: table-row;
cursor: pointer;
}
.tr{
display: table-row;
cursor: pointer;
outline: 1px solid red;
}
.td {
display: table-cell;
text-align: left;
padding: 20px;
}
div .th {
outline: 2px solid black;
}
.extra-info{
display: table-row;
outline: 1px solid black;
height: 35px;
width: 100%;
}
.style{
color: black;
}
.tr{
}
<div class="main">
<div class="table">
<div class="th">
<div class="td">Heading 1</div>
<div class="td">Heading 2</div>
<div class="td">Heading 3</div>
<div class="td">Heading 4</div>
</div>
<br>
<div class="tr">
<div class="td">aaaa 1</div>
<div class="td">aaaa 2</div>
<div class="td">aaaa 3</div>
<div class="td">aaaa 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
<br>
<div class="tr">
<div class="td">bbbb 1</div>
<div class="td">bbbb 2</div>
<div class="td">bbbb 3</div>
<div class="td">bbbb 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
</div>

Related

Table height 100% difference between Firefox and Chrome

I've a table inside another table in HTML/CSS - and I want the inside table be at height 100% of the surrounding table cell.
Something like that (the pink table has 100% of the height):
That works fine in Firefox - but in Chrome I get this:
The code for both is:
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to keep it simple.
But who gets it wrong? FF or Chrome? And how can I talk Chrome into drawing the inside table 100% in height?

So, you want the table with class table-base to have 100% the height of the other table, that's right?
If so, I defined the height to 100% on that class.
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps.
Regards

CSS Grid - Make table-like grid overflow when item is too big

I'm trying to create a table with CSS grid. So far I created a simple outline.
I have to create the grids at the row level (due to the fact that IRL the tables have more elements and I cannot make them at the table level). So far this works unless there is a very long word (or number), as in that case it overflows the containing cell.
My question is: is it possible to make the table overflow in order to make the cells at least as big as the biggest single word or number? (without making them break—at least the numbers)
Thanks in advance!
Edit: I need to create a table with CSS grid as I need to use the same layout for the mobile version
Edit2: I don't know in advance how many elements I will have in the rows/columns, so I need to make use of repeat
Edit3: I'm looking for a pure CSS solution.
.table {
margin: 48px 0;
box-shadow: 0 5px 10px -2px #cfcfcf;
font-family: Arial;
}
.row {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(72px, 1fr) );
min-height: 48px;
border-bottom: 1px solid #f1f1f1;
}
.column {
display: flex;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
align-items: center;
}
.row:first-child {
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table">
<div class="row">
<div class="column">Name</div>
<div class="column">Age</div>
<div class="column">Favourite Book</div>
<div class="column">Favourite Color</div>
<div class="column">Favourite Meal</div>
</div>
<div class="row">
<div class="column">Jimmy</div>
<div class="column">23</div>
<div class="column">None</div>
<div class="column">White</div>
<div class="column">Paella de Chorizo</div>
</div>
<div class="row">
<div class="column">Johny</div>
<div class="column">56</div>
<div class="column">Finnegans Wake</div>
<div class="column">Purple, Magenta and Violet</div>
<div class="column">None</div>
</div>
<div class="row">
<div class="column">Robert The Snake Robertson</div>
<div class="column">1.234.567.890.000.000</div>
<div class="column">The Count of Monte Cristo</div>
<div class="column">Orange</div>
<div class="column">Apples</div>
</div>
</div>
</body>
</html>

You want a table layout, then use table and not grid:
.table {
margin: 48px 0;
box-shadow: 0 5px 10px -2px #cfcfcf;
font-family: Arial;
display:table;
width:100%;
}
.row {
display: table-row;
min-height: 48px;
border-bottom: 1px solid #f1f1f1;
}
.column {
display: table-cell;
border: 1px solid #f1f1f1;
vertical-align: middle;
padding:10px 0;
}
.row:first-child {
font-weight: bold;
}
<div class="table">
<div class="row">
<div class="column">Name</div>
<div class="column">Age</div>
<div class="column">Favourite Book</div>
<div class="column">Favourite Color</div>
<div class="column">Favourite Meal</div>
</div>
<div class="row">
<div class="column">Jimmy</div>
<div class="column">23</div>
<div class="column">None</div>
<div class="column">White</div>
<div class="column">Paella de Chorizo</div>
</div>
<div class="row">
<div class="column">Johny</div>
<div class="column">56</div>
<div class="column">Finnegans Wake</div>
<div class="column">Purple, Magenta and Violet</div>
<div class="column">None</div>
</div>
<div class="row">
<div class="column">Robert The Snake Robertson</div>
<div class="column">1.234.567.890.000.000</div>
<div class="column">The Count of Monte Cristo</div>
<div class="column">Orange</div>
<div class="column">Apples</div>
</div>
</div>

Well you can use CSS fit-content(max-width) (docs) but I don't know if it can be used in conjunction with grid repeat().
.row {
display: grid;
grid-template-columns: auto, fit-content(300px), fit-content(100px), auto, auto;
min-height: 48px;
border-bottom: 1px solid #f1f1f1;
}
Edit: Inside a repeat(), you can use the max-content keyword.
grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
You might need to add your own wrapping rules for some cells though.

You're using a mix of grid and flexbox. Try with just grid:
Updated to set the repeat style inline (since the amount of columns may change)
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);/* overridden inline */
border-top: 1px solid black;
border-right: 1px solid black;
}
.grid>div {
padding: 8px 4px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.grid>div.th {
font-weight: bold;
}
<div class="grid" style="grid-template-columns: repeat(5,1fr);">
<div class="th">Name</div>
<div class="th">Age</div>
<div class="th">Favourite Book</div>
<div class="th">Favourite Color</div>
<div class="th">Favourite Meal</div>
<div>Jimmy</div>
<div>23</div>
<div>None</div>
<div>White</div>
<div>Paella de Chorizo</div>
<div>Johny</div>
<div>56</div>
<div>Finnegans Wake</div>
<div>Purple, Magenta and Violet</div>
<div>None</div>
<div>Robert The Snake Robertson</div>
<div>1.234.567.890.000.000</div>
<div>The Count of Monte Cristo</div>
<div>Orange</div>
<div>Apples</div>
</div>

Only add word-break: break-word; property in column class
.table {
margin: 48px 0;
box-shadow: 0 5px 10px -2px #cfcfcf;
font-family: Arial;
}
.row {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(72px, 1fr) );
min-height: 48px;
border-bottom: 1px solid #f1f1f1;
}
.column {
display: flex;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
align-items: center;
word-break: break-word;
}
.row:first-child {
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table">
<div class="row">
<div class="column">Name</div>
<div class="column">Age</div>
<div class="column">Favourite Book</div>
<div class="column">Favourite Color</div>
<div class="column">Favourite Meal</div>
</div>
<div class="row">
<div class="column">Jimmy</div>
<div class="column">23</div>
<div class="column">None</div>
<div class="column">White</div>
<div class="column">Paella de Chorizo</div>
</div>
<div class="row">
<div class="column">Johny</div>
<div class="column">56</div>
<div class="column">Finnegans Wake</div>
<div class="column">Purple, Magenta and Violet</div>
<div class="column">None</div>
</div>
<div class="row">
<div class="column">Robert The Snake Robertson</div>
<div class="column">1.234.567.890.000.000</div>
<div class="column">The Count of Monte Cristo</div>
<div class="column">Orange</div>
<div class="column">Apples</div>
</div>
</div>
</body>
</html>

how can collaspe border with div

this is my studi case :
http://codepen.io/darkiron/pen/ZORNEp
I can't make in my exemple, border collasped.
How i can do this, in this case ?
.col-md-4{
border: 1px solid aqua;
/*margin: -1px;*/
}

html,body{
background-color: #333;
}
.panel {
margin:auto;
}
.panel-body {
border-collapse: collapse;
table-layout: fixed;
text-align: center;
display: table;
width: 100%;
padding: 0;
}
.panel-body .col {
border: 1px solid aqua;
display: table-cell;
width: inherit;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-9">
<div class="panel panel-default ">
<div class="panel-heading">test</div>
<div class="panel-body">
<div class="col">
content 1
</div>
<div class="col">
content 2
</div>
<div class="col">
content 3
</div>
</div>
</div>
</div>
</div>

Easy
.panel-body div:not(:last-child){
border-right: none;
}

The border-collapse property is for use on table elements so if you are not using tables you can make elements behave like a table through display: table or display: inline-table.
You can should adddisplay: table; display:table-row; display:table-cell; and border-collapse: collapse;
html,body{
background-color: #333;
}
.panel{
margin:auto;
display:table-row;
}
.container{
display: table;
border-collapse: collapse;
}
.panel-body{
padding:0px;
}
.col-md-4{
display: table-cell;
border: 1px solid aqua;
/*margin: -1px;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-9">
<div class="panel panel-default ">
<div class="panel-heading">test</div>
<div class="panel-body">
<div class="col-md-4">
content 1
</div>
<div class="col-md-4">
content 2
</div>
<div class="col-md-4">
content 3
</div>
</div>
</div>
</div>
</div>

None of this solution work !
all border need collasping (panel too)
#Andrey Fedorov I cant have more div.
the best way I can find it negative margin !
http://codepen.io/darkiron/pen/ZORNEp

Setting the variable percentage width of HTML elements next to other variable-width elements

I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.
Is it possible to solve this problem with CSS only?
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.caption {
float: left;
}
.progress {
height: 14px;
border: 1px solid white;
border-radius: 4px;
background-color: green;
overflow: hidden;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text: </div>
<div class="progress" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text: </div>
<div class="progress" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>

Have you considered using Flexbox?
Just add this rule:
.row {
display: flex;
}
If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:
.table {
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
padding: 15px;
width: 280px;
}
.inner-table {
display: table;
}
.row {
display: table-row;
}
.caption {
display: table-cell;
white-space: nowrap;
width: 1%;
}
.progress {
background-color: green;
border: 1px solid white;
border-radius: 4px;
display: table-cell;
height: 14px;
}
.value {
margin-left: 5px;
display:block;
width:0;
overflow: visible;
}
<div class="table">
<div class="inner-table">
<div class="row">
<div class="caption">Short text: </div>
<div style="width:1.65%" class="progress">
<span class="value">1.65</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">A bit longer text: </div>
<div style="width:100%" class="progress">
<span class="value">100.00</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
<div class="remainder"></div>
</div>
</div>
</div>

Please try this - padding-right: 5px; display:inline; add these properties in progress class and also remove width in progress.

Well, just for the future reference, I was playing a bit with the flexbox thingie and came up with this:
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.row {
display: flex;
}
.caption {
margin: 1px 5px 1px 0;
}
.progress {
flex-grow: 1;
margin: auto;
}
.progress-content {
height: 14px;
border-radius: 4px;
background-color: green;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text:</div>
<div class="progress">
<div class="progress-content" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text:</div>
<div class="progress">
<div class="progress-content" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">X:</div>
<div class="progress">
<div class="progress-content" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
</div>
If I get a solution without flexbox, will accept it as an answer :)

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

I have the following code:
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.colspan2 {
/* What to do here? */
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2">Cell</div>
</div>
</div>
Pretty straightforward. How do I add a colspan (or the equivalent of colspan) for elements with display: 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

Since OP does not explicitly rule that solution must be pure CSS, I'll be stubborn and throw in my workaround I figured out today, especially since it's much more elegant than having a table inside a table.
Example equals to <table> with two cells per row and two rows, where the cell in the second row is a td with colspan="2".
I have tested this with Iceweasel 20, Firefox 23 and IE 10.
div.table {
display: table;
width: 100px;
background-color: lightblue;
border-collapse: collapse;
border: 1px solid red;
}
div.row {
display: table-row;
}
div.cell {
display: table-cell;
border: 1px solid red;
}
div.colspan,
div.colspan+div.cell {
border: 0;
}
div.colspan>div {
width: 1px;
}
div.colspan>div>div {
position: relative;
width: 99px;
overflow: hidden;
}
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
</div>
Live action (demo) here.
EDIT:
I finetuned the code to be more printer-friendly, as they leave background-colors out by default. I also created rowspan-demo, inspired by late answer here.

A simpler solution that works for me in Chrome 30 :
Colspan can be emulated by using display: table instead of display: table-row for the rows :
.table {
display: block;
}
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
display: block;
}
The only pitfall is that the cells of stacked rows won't align vertically, as they're from different tables.

If you're looking for a straight CSS way to simulate a colspan, you could use display: table-caption.
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
.colspan2 {
/* What to do here? */
display: table-caption;
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2">Cell</div>
</div>
</div>

Simply use a table.
table's are only frowned upon when being used for layout purposes.
This seems like tabular data (rows/columns of data). Therefore I would recommend using a table.
See my answer to this question for more information:
creating the same thing with divs as tables

Here's one way to span columns in CSS I used for my own situation.
https://jsfiddle.net/mb8npttu/
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px dotted red;
}
.colspan {
max-width: 1px;
overflow: visible;
}
<div class='table'>
<div class='row'>
<div class='cell colspan'>
spanning
</div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'>1</div>
<div class='cell'>2</div>
<div class='cell'>3</div>
</div>
</div>

There is a solution to make the colspan the widht of the entire table. You can not use this technique to colspan a part of the table.
Code:
* {
box-sizing: border-box;
}
.table {
display: table;
position: relative;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.colspan {
position: absolute;
left: 0;
width: 100%;
}
.dummycell {
border-color: transparent;
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell dummycell"> </div>
<div class="cell colspan">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
Explanation:
We use position absolute on the colspan to make it the full width of the table. The table itself needs position relative. We make use of a dummycell to maintain the height of the rows, position absolute does not follow the flow of the document.
Of course you can also use flexbox and grid to tackle this problem these days.

CSS
.tablewrapper {
position: relative;
}
.table {
display: table;
position: relative
}
.row {
display: table-row;
}
.cell {
border: 1px solid red;
display: table-cell;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
.cell.colspan {
position: absolute;
left: 0;
right: 0;
}
HTML
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell rowspanned">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell empty"></div>
<div class="cell colspan">
Bottom right
</div>
</div>
</div>
</div>
Code

It can be done just with pure CSS and centering the text across the "fake" colspan.
The trick is to set the rows to position:relative, then to place "empty divs" in the row where you want to make the colspan (they must have height in order to work), set the cell where the content is in as display:grid, and finally, applying position:absolute to the element inside the cell (and center it as you may center any other absolute element).
.table {
display: table;
}
.row {
display: table-row;
position: relative;
}
.cell {
display: table-cell;
background-color: blue;
color: white;
height: 26px;
padding: 0 8px;
}
.colspan2 {
display: grid;
}
.colspan2 p {
position:absolute;
left: 50%;
transform:translateX(-50%);
margin: 0;
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2"><p>Cell</p></div>
<div class="cell"></div>
</div>
</div>

By using the appropriate div classes and CSS attributes, you can mimic the desired effects of the colspan and rowspan.
Here's the CSS
.table {
display:table;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding: 5px;
vertical-align: middle;
}
Here's the sample HTML
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">X</div>
<div class="cell">Y</div>
<div class="cell">Z</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">4</div>
<div class="cell">6</div>
</div>
</div>
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">A</div>
</div>
<div class="row">
<div class="cell">B</div>
</div>
</div>
</div>
<div class="cell">
ROW SPAN
</div>
</div>
</div>
</div>
</div>
</div>
From what I'm seeing in both the questions, and most responses, is people seem to forget that in any given div that's acting as a "table-cell" you can insert another div that's acting like an embedded table, and start the process over.
***It's not glamorous, but it does work for those looking for this type of formatting and they want to avoid the TABLEs. If its for DATA LAYOUT, TABLEs do still work in HTML5.
Hopefully, this will help someone.

You can set the position of colspan content as "relative" and the row as "absolute" like this:
.table {
display: table;
}
.row {
display: table-row;
position: relative;
}
.cell {
display: table-cell;
}
.colspan2 {
position: absolute;
width: 100%;
}

You can't achieve this at present.
AFAIK this would be covered by CSS Tables, a specification which appears to currently be at "work in progress" state.

You can try this solution, where you can find how to apply colspan using div
https://codepen.io/pkachhia/pen/JyWMxY
HTML:
<div class="div_format">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell cell_lable">Project Name</div>
<div class="divTableCell cell_value">: Testing Project</div>
<div class="divTableCell cell_lable">Project Type</div>
<div class="divTableCell cell_value">: Web application</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Version</div>
<div class="divTableCell cell_value">: 1.0.0</div>
<div class="divTableCell cell_lable">Start Time</div>
<div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Version</div>
<div class="divTableCell cell_value">: 2.0.0</div>
<div class="divTableCell cell_lable">End Time</div>
<div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Revision</div>
<div class="divTableCell cell_value">: 3</div>
<div class="divTableCell cell_lable">Overall Result</div>
<div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
</div>
</div>
<div class="divCaptionRow">
<div class="divCaptionlabel">Description</div>
<div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
CSS:
body {
font-family: arial
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.div_format {
width: 100%;
display: inline-block;
position: relative
}
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row
}
.divTableHeading {
background-color: #EEE;
display: table-header-group
}
.divTableCell,
.divTableHead {
display: table-cell;
padding: 10px
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold
}
.divTableBody {
display: table-row-group
}
.divCaptionRow{
display: table-caption;
caption-side: bottom;
width: 100%;
}
.divCaptionlabel{
caption-side: bottom;
display: inline-block;
background: #ccc;
padding: 10px;
width: 15.6%;
margin-left: 10px;
color: #727272;
}
.divCaptionValue{
float: right;
width: 83%;
padding: 10px 1px;
border-bottom: 1px solid #dddddd;
border-right: 10px solid #fff;
color: #5f5f5f;
text-align: left;
}
.cell_lable {
background: #d0d0d0;
border-bottom: 1px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 10px solid #fff;
width: 15%;
color: #727272;
}
.cell_value {
border-bottom: 1px solid #dddddd;
width: 30%;
border-right: 10px solid #fff;
color: #5f5f5f;
}

Use nested tables to nest column spans...
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cell">Cell</div>
</div>
</div>
Or use 2 tables where the column span covers the whole row...
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell">Cell</div>
</div>
</div>

Even if this is an old question, I would like to share my solution to this problem.
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan">
<div class="spanned-content">Cell</div>
</div>
</div>
</div>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.colspan:after {
/* What to do here? */
content: "c";
display: inline;
visibility: hidden;
}
.spanned-content {
position: absolute;
}
</style>
Here is a fiddle.
It's not really a span, and the solution is a bit hacky, but it is usefull in some situations. Tested on Chrome 46, Firefox 31 and IE 11.
In my case, I had to present some non-tabular data in a tabular way, keeping the width of the columns and giving title to sub-sections of the data.