Inner divs padding affects outer div positioning. (margin collapsing?) - html

I have the following HTML:
<p>messy</p>
<div class="row">
<div class="cell">
<div class="one wrapper">1</div>
</div>
<div class="cell">
<div class="two wrapper">2</div>
</div>
<div class="cell">
<div class="three wrapper">
<div class="foo">3</div>
</div>
</div>
</div>
<p>good</p>
<div class="row">
<div class="cell">
<div class="one wrapper">1</div>
</div>
<div class="cell">
<div class="two wrapper">2</div>
</div>
<div class="cell">
<div class="three wrapper">3</div>
</div>
</div>
With this CSS:
.row {
display: table;
table-layout: fixed;
overflow: hidden;
background-color:blue;
width:100%;
}
.cell {
display: table-cell;
overflow: hidden;
padding: 0;
}
.wrapper {
overflow: hidden;
position: relative;
padding:0;
display: block;
height:42px;
background-color:red;
}
.one {
width:100px;
}
.two {
width:40px;
}
.three {
width:100px;
}
.foo {
padding: 10px;
}
You can see the fiddle here.
Why is three messing up the layout in case a child has a padding? I've read various articles about margin collapsing in the past, but I could'nt fix this layout using one of the techniques.

It's simple just add vertical-align: middle; in .cell Class.
jsFiddle

Related

how do I vertically align boxes in middle

Basically, i would like to align these items in the middle. It's three items that i want to align in the middle, vertically. I've tried vertical align: middle, but it didn't work.. I don't prefer position:absolute tho.
HTML
` <div class="info">
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
</div>
CSS
.info{
width:100%;
height:50vw;
background-color: #FFAE00;
margin-top:0;
display: flex;
text-align: center;
}
.box h5{
font-size: 2vw;
}
.box{
width:25%;
height:100%;
display: inline-block;
margin-top:3vw;
}
.box img{
width:7vw;
height:7vw;
}
.box p{
font-size: 6vw;
}
FIDDLE: https://jsfiddle.net/5Lstx44y/
I made a few changes to your CSS, this is using the table/table-cell pattern. It's pretty cool cause it will work with any size content without hacking it with margins/padding. You can adjust <.info>'s height to see what I mean.
Here is the updated version: https://jsfiddle.net/x5rdLgv2/
Main differences are:
.box {
display: table;
}
.cont {
display: table-cell;
vertical-align: middle;
}
I also removed some of your hacked margins!
Change css style for box to
.box {
width: 25%;
height: 100%;
display: inline-block;
vertical-align: middle;
padding-top: 25%; //Increase or Decrease as your need.
}
Use flex-direction:column
for more example use this link
.info{
width:100%;
height:100vh
background-color: #FFAE00;
margin-top:0;
display: flex;
text-align: center;
flex-direction:column;
}
.box h5{
font-size: 2vw;
}
.box{
margin-top:3vw;
}
.box img{
width:7vw;
height:7vw;
}
.box p{
font-size: 6vw;
}
<div class="info">
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
</div>

How to use a border and a padding while using display table-row

I am trying to use create a table by using the display:table css attributes.
The table needs to have a border at the bottom and a padding inside every row, like:
.row{
display: table-row;
border-bottom: 1px solid #e5e5e5;
padding: 20px 0;
}
I have read that i can get the border by using this
.table {
border-collapse: collapse;
}
.row {
border-bottom: solid #000 3px
}
I also know that i can get the padding by using
.table {
display:table;
border-collapse:separate;
border-spacing:5px;
}
.row {
display:table-row;
}
I am now in the the dilemma that i can't use both at the same time.
The border only works when I am using border-collapse: collapse; while the padding only works when i am using border-collapse:separate;
Is there any solution or workaround to get both, the padding and the border at the same time?
Edit
Heres an example (border doesnt work):
.table {
display:table;
border-collapse:seperate;
border-spacing:15px;
}
.row {
display:table-row;
border-bottom:3px solid #000;
}
.cell{
display:table-cell;
background-color: #eee;
padding:20px;
}
<div class="table">
<div class="row">
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
<div class="row">
<div class="cell">
some content<br> in another row
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
<div class="row">
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
</div>
Here's also a jsfiddle in which you can try to change the border-collapseattribute
Edit 2
Heres an picture of what I'm trying to achive:
The answer you are looking for isn't possible directly. But if you wish to manage it with some hacks or other ways, here is the solution.
I just did a demo, you can customize to your requirement.
.table {
display: table;
border-collapse: separate;
border-spacing: 15px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
background-color: #eee;
padding: 20px;
position: relative;
}
.cell:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 3px;
margin-top: 6px;
background: #000;
}
.cell:before {
content: '';
display: block;
position: absolute;
left: 100%;
top: 100%;
width: 15px;
height: 3px;
margin-top: 6px;
background: #000;
}
/* Delete below code if you want border below last row as well*/
.row:last-child .cell:before,
.row:last-child .cell:after {
content: none;
}
<div class="table">
<div class="row">
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
<div class="row">
<div class="cell">
some content<br> in another row
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
<div class="row">
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
</div>
EDIT
Like this?
.table {
display:table;
border-collapse:separate;
border-spacing:5px;
}
.row {
display:table-row;
}
.cell{
display:table-cell;
border: 1px solid blue;
background-color: #eee;
padding:20px;
}
<div class="table">
<div class="row">
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
<div class="row">
<div class="cell">
some content<br> in another row
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
<div class="row">
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
<div class="cell">
some content
</div>
</div>
</div>

Display content outside of table

I'm trying to number all rows of a custom div table displaying the numbers outside content how you can see on image displayed bellow.
But I have no clue how to that using css, if someone can help me with bright idea.
I have tried using :before and adding a content but I don't know why is not working :|
This is a small fiddle with my div table .
Here is an example:
.table {
display:table;
border: 0px solid #444;
border-collapse: collapse;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding:2px;
border: 1px solid #ccc;
}
.header {
font-weight:bold;
text-align:center;
}
<div class="table">
<div class="row" style="border-width:0">
<div class="" style="border-width:0"></div>
<div class="cell" style="border-width:0">1</div>
<div class="cell" style="border-width:0">2</div>
<div class="cell" style="border-width:0">3</div>
<div class="cell" style="border-width:0">4</div>
</div>
<div class="row">
<div class=" header">1</div>
<div class="cell header">Team</div>
<div class="cell header">Wins</div>
<div class="cell header">Losses</div>
<div class="cell header">Pct</div>
</div>
<div class="row">
<div class="">2</div>
<div class="cell">Bulls</div>
<div class="cell">29</div>
<div class="cell">18</div>
<div class="cell">.617</div>
</div>
<div class="row">
<div class="">3</div>
<div class="cell">Pacers</div>
<div class="cell">28</div>
<div class="cell">19</div>
<div class="cell">.596</div>
</div>
<div class="row">
<div class="">4</div>
<div class="cell">Bucks</div>
<div class="cell">25</div>
<div class="cell">21</div>
<div class="cell">.617</div>
</div>
</div>
http://fiddle.jshell.net/RFWT5/23/
You can use css counters for this.
Display them in a pseudo element on the row:
.table {
display:table;
border: 2px solid #444;
border-collapse: collapse;
margin-left: 50px;
margin-top: 50px;
}
.row {
display:table-row;
position: relative;
}
.cell {
display:table-cell;
padding:2px;
border: 1px solid #ccc;
}
.header {
font-weight:bold;
text-align:center;
position: relative;
}
.row:nth-child(n+2) {
counter-increment: rowno;
}
.row:nth-child(n+2)::before {
content: counter(rowno);
position: absolute;
left: 30px;
}
.row:first-child::before {
content: "";
position: absolute;
left: 30px;
}
.header {
counter-increment: colno;
}
.header::before {
content: counter(colno);
position: absolute;
top: -30px;
}
<div class="table">
<div class="row">
<div class="cell header">Team</div>
<div class="cell header">Wins</div>
<div class="cell header">Losses</div>
<div class="cell header">Pct</div>
</div>
<div class="row">
<div class="cell">Bulls</div>
<div class="cell">29</div>
<div class="cell">18</div>
<div class="cell">.617</div>
</div>
<div class="row">
<div class="cell">Pacers</div>
<div class="cell">28</div>
<div class="cell">19</div>
<div class="cell">.596</div>
</div>
<div class="row">
<div class="cell">Bucks</div>
<div class="cell">25</div>
<div class="cell">21</div>
<div class="cell">.617</div>
</div>
</div>

HTML - Columns ignore height

Right now I have this:
But I need something like this:
HTML
<div id="content">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
...
</div>
CSS
.block
{
width:350px;
background-color:white;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
}
#content
{
position:relative;
display:inline;
overflow:auto;
}
I tried using columns but that didn't work well, it showed one column only even though the column count was higher than 1.
Here is my solution:
HTML:
<div class="grid-container">
<div class="third">
<div class="grid grid1">
<p>Grid 1</p>
</div>
<div class="grid grid2">
<p>Grid 2</p>
</div>
</div>
<div class="third">
<div class="grid grid3">
<p>Grid 3</p>
</div>
<div class="grid grid4">
<p>Grid 4</p>
</div>
</div>
<div class="third">
<div class="grid grid5">
<p>Grid 5</p>
</div>
<div class="grid grid6">
<p>Grid 6</p>
</div>
</div>
</div>
CSS:
.grid-container {
width: 100%;
text-align: center;
margin-top: 15px;
}
.third {
display: inline-table;
width: 30%;
}
.grid {
border: 1px solid black;
margin: 10px 0;
}
.grid1 {
height: 200px;
}
.grid2 {
height: 100px;
}
.grid3 {
height: 100px;
}
.grid4 {
height: 350px;
}
.grid5 {
height: 200px;
}
.grid6 {
height: 200px;
}
Now i have used lots of css classes here (grid1, grid2 ...), they normally dont have to be used, just set height: auto so it takes the height needed to show all content.
Working example can be found here:
http://cssdeck.com/labs/full/nuauntmo
Depending on what you are trying to achieve, you could put the vertically stacked blocks in separate containers. Something like this:
HTML:
<div id="content">
<div class="col">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
<div class="col">
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
...
CSS:
.col {
display: inline-block;
margin-right:80px;
vertical-align: top;
}
.block {
width:350px;
background-color:#ccc;
border-radius:5px;
margin-bottom:80px;
display:block;
vertical-align: top;
}
#content {
position:relative;
display:inline;
overflow:auto;
}
The columns will wrap if there is not enough horizontal space though, so the container would have to have a fixed width.
try adding vertical-align property in css.
.block
{
width:350px;
background-color:grey;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
vertical-align: top;
}

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.