Related
I'm using a CSS grid to display a table of numeric data. In a given column, I'd like all of the numeric data to be right aligned but centered within the space allocated for the column. In other words, it should look something like this.
I want the Price and Discount columns to have the same width and the prices to be right aligned to each other and then centered in the column.
This is my first attempt and the result.
HTML
<div class="product-table">
<div class="first-column">Item</div>
<div class="middle-column">Price</div>
<div class="last-column">Discount</div>
<div class="first-column">Widget A</div>
<div class="middle-column">2.00</div>
<div class="last-column">0.50</div>
<div class="first-column">Widget B</div>
<div class="middle-column">2,000.00</div>
<div class="last-column">2.50</div>
<div class="first-column">Widget C</div>
<div class="middle-column">3,000,000.00</div>
<div class="last-column">3,000.00</div>
</div>
CSS
.product-table {
display: grid;
grid-template-columns: 20% 1fr 1fr;
}
.first-column {
background-color: lightcyan;
}
.middle-column {
text-align: center;
background-color: lightsalmon;
}
.last-column {
text-align: right;
background-color: lightblue;
}
The columns are sized like I want them but the numbers are not aligned correctly.
My next attempt was to use auto for the column size and empty divs to pad out the column.
HTML.
<div class="product-table">
<div class="first-column">Item</div>
<div></div><div class="middle-column-title">Price</div><div></div>
<div class="last-column">Discount</div>
<div class="first-column">Widget A</div>
<div></div><div class="middle-column">2.00</div><div></div>
<div class="last-column">0.50</div>
<div class="first-column">Widget B</div>
<div></div><div class="middle-column">2,000.00</div><div></div>
<div class="last-column">2.50</div>
<div class="first-column">Widget C</div>
<div></div><div class="middle-column">3,000,000.00</div><div></div>
<div class="last-column">3,000.00</div>
</div>
CSS
.product-table {
display: grid;
grid-template-columns: 20% 0.4fr auto 0.4fr 1fr;
}
.first-column {
background-color: lightcyan;
}
.middle-column-title {
text-align: center;
background-color: lightsalmon;
}
.middle-column {
text-align: right;
background-color: lightsalmon;
}
.last-column {
text-align: right;
background-color: lightblue;
}
This results in something pretty close to what I want, but the column width is 0.4fr + 0.4fr + price column width. What I really want is to be able to specify the total width of the spacer divs and price so that I can make the Price and Discount columns the same width.
Is there a way to achieve this?
A table might be better for your needs (and accessibility).
This might be what you are looking for:
HTML:
<table class="product-table">
<thead>
<th class="f-head">Item</th>
<th class="m-head">Price</th>
<th class="l-head">Discount</th>
</thead>
<tr>
<td class="first-column">Widget A</td>
<td class="middle-column">2.00</td>
<td class="last-column">0.50</td>
</tr>
<tr>
<td class="first-column">Widget B</td>
<td class="middle-column">2,000.00</td>
<td class="last-column">2.50</td>
</tr>
<tr>
<td class="first-column">Widget C</td>
<td class="middle-column">3,000,000.00</td>
<td class="last-column">3,000.00</td>
</tr>
</table>
CSS:
.product-table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
.product-table > th {
text-align: center;
}
.first-column {
background-color: lightcyan;
}
.f-head {
background-color: lightcyan;
width: 20%;
}
.middle-column {
text-align: right;
background-color: lightsalmon;
}
.m-head {
width: 20%;
background-color: lightsalmon;
}
.last-column {
text-align: right;
background-color: lightblue;
}
.l-head {
background-color: lightblue;
}
With table-layout as fixed, the column width is defined by each th widths. Every non-specified 'th' width will be auto.
But... in case you insist on that structure, in spite of everything else:
HTML:
<body>
<div class="product-table">
<div id="f-column">
<div><div class="head">Item</div></div>
<div class="cell">Widget A</div>
<div class="cell">Widget B</div>
<div class="cell">Widget C</div>
</div>
<div id="m-column">
<div class="head m-head">Price</div>
<div class="m-column-numbers">
<div class="cell"><div class="m-cell">2.00</div></div>
<div class="cell"><div class="m-cell">2,000.00</div></div>
<div class="cell"><div class="m-cell">3,000,000.00</div></div>
</div>
</div>
<div id="l-column">
<div class="head">Discount</div>
<div class="cell">0.50</div>
<div class="cell">2.50</div>
<div class="cell">3,000.00</div>
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 16px;
}
.product-table {
display: flex;
width: 100%;
}
.head {
font-weight: bold;
}
.m-head {
text-align: center;
}
#f-column {
background: lightcyan;
flex: 1;
}
#m-column {
background: lightsalmon;
flex: 1 0 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.m-column-numbers {
width: max-content;
}
#l-column {
background: lightblue;
flex: 1 0 30%;
text-align: right;
}
.cell {
width: 100%;
}
.m-cell {
text-align: right;
}
This provides the structure, but it will complicate the dynamic population of data and it has no accessibility at all.
Is there any way to prevent div3 from being wrapped to the next line and instead of vertical scrolling do horizontal?
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
table { width: 400px; height: 100px; }
td { width: 50%; border: 1px solid gray; }
div.container { height: 100px; width: 100%; background: red; overflow-x: scroll; }
div.inner { height: 100px; width: 80px; display: block; float: left; background: blue; color: #fff; }
jsfiddle example
with floats you can't have scroll on the horizontal axis because if a floating element can't fit in the remaining space it will fall to the next line.
So we have to treat the divs as inline level blocks and set white-space:nowrap to prevents divs from breaking to next line.
table {
width: 400px;
height: 100px;
table-layout: fixed;
}
td {
width: 50%;
border: 1px solid gray;
}
div.container {
height: 100px;
width: 100%;
background: red;
overflow-x: scroll;
/* added */
white-space: nowrap;
/* to remove space between divs */
font-size: 0;
}
div.inner {
height: 100px;
width: 80px;
background: blue;
color: #fff;
/*display: block; removed */
/*float: left; removed */
/* added */
display: inline-block;
/* because font size in inherited it will be set to 0
but we want text to apear
*/
font-size: 16px;
}
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
if you need only 3 divs and you are using bootstrap you can do something like this:
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="col-3">div1</div>
<div class="col-3">div2</div>
<div class="col-3">div3</div>
</div>
</td>
</tr>
</table>
css
div {
display: inline-block;
}
js fiddle
bootstrap grid-system split each row in 12 columns by default, may you want to take a look to their documentation: grid system
Add <br> to your code:
<table>
<tr>
<td>td1</td>
<br>
<td>
<div class="container">
<div class="inner">div1</div>
<br>
<div class="inner">div2</div>
<br>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
I'm trying to construct a layout similar to the following:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
where the bottom is filling the space of the upper row.
If this were an actual table, I could easily accomplish this with <td colspan="3">, but as I'm simply creating a table-like layout, I cannot use <table> tags. Is this possible using CSS?
There's no simple, elegant CSS analog for colspan.
Searches on this very issue will return a variety of solutions that include a bevy of alternatives, including absolute positioning, sizing, along with a similar variety of browser- and circumstance-specific caveats. Read, and make the best informed decision you can based on what you find.
There is no colspan in css as far as I know, but there will be column-span for multi column layout in the near future, but since it is only a draft in CSS3, you can check it in here. Anyway you can do a workaround using div and span with table-like display like this.
This would be the HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
And this would be the css:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
The only reason to use this trick is to gain the benefit of table-layout behaviour, I use it alot if only setting div and span width to certain percentage didn't fullfil our design requirement.
But if you don't need to benefit from the table-layout behaviour, then durilai's answer would suit you enough.
Another suggestion is using flexbox instead of tables altogether. This is a "modern browser" thing of course, but come on, it's 2016 ;)
At least this might be an alternative solution for those looking for an answer to this nowadays, since the original post was from 2010.
Here's a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table {
border: 1px solid red;
padding: 2px;
max-width: 300px;
display: flex;
flex-flow: row wrap;
}
.table-cell {
border: 1px solid blue;
flex: 1 30%;
}
.colspan-3 {
border: 1px solid green;
flex: 1 100%;
}
<div class="table">
<div class="table-cell">
row 1 - cell 1
</div>
<div class="table-cell">
row 1 - cell 2
</div>
<div class="table-cell">
row 1 - cell 3
</div>
<div class="table-cell colspan-3">
row 2 - cell 1 (spans 3 columns)
</div>
</div>
<div style="width: 100%;">
<div style="float: left; width: 33%;">Row 1 - Cell 1</div>
<div style="float: left; width: 34%;">Row 1 - Cell 2</div>
<div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
To provide an up-to-date answer: The best way to do this today is to use css grid layout like this:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
and the HTML
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
</div>
That isn't part of the purview of CSS. colspan describes the structure of the page's content, or gives some meaning to the data in the table, which is HTML's job.
I've had some success, although it relies on a few properties to work:
table-layout: fixed
border-collapse: separate
and cell 'widths' that divide/span easily, i.e. 4 x cells of 25% width:
.div-table-cell,
* {
box-sizing: border-box;
}
.div-table {
display: table;
border: solid 1px #ccc;
border-left: none;
border-bottom: none;
table-layout: fixed;
margin: 10px auto;
width: 50%;
border-collapse: separate;
background: #eee;
}
.div-table-row {
display: table-row;
}
.div-table-cell {
display: table-cell;
padding: 15px;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
text-align: center;
background: #ddd;
}
.colspan-3 {
width: 300%;
display: table;
background: #eee;
}
.row-1 .div-table-cell:before {
content: "row 1: ";
}
.row-2 .div-table-cell:before {
content: "row 2: ";
}
.row-3 .div-table-cell:before {
content: "row 3: ";
font-weight: bold;
}
.div-table-row-at-the-top {
display: table-header-group;
}
<div class="div-table">
<div class="div-table-row row-1">
<div class="div-table-cell">Cell 1</div>
<div class="div-table-cell">Cell 2</div>
<div class="div-table-cell">Cell 3</div>
</div>
<div class="div-table-row row-2">
<div class="div-table-cell colspan-3">
Cor blimey he's only gone and done it.
</div>
</div>
<div class="div-table-row row-3">
<div class="div-table-cell">Cell 1</div>
<div class="div-table-cell">Cell 2</div>
<div class="div-table-cell">Cell 3</div>
</div>
</div>
https://jsfiddle.net/sfjw26rb/2/
Also, applying display:table-header-group or table-footer-group is a handy way of jumping 'row' elements to the top/bottom of the 'table'.
You could trying using a grid system like http://960.gs/
Your code would be something like this, assuming you're using a "12 column" layout:
<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
Try adding display: table-cell; width: 1%; to your table cell element.
.table-cell {
display: table-cell;
width: 1%;
padding: 4px;
border: 1px solid #efefef;
}
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
</div>
The CSS properties "column-count", "column-gap", and "column-span" can do this in a way that keeps all the columns of the pseudo-table inside the same wrapper (HTML stays nice and neat).
The only caveats are that you can only define 1 column or all columns, and column-span doesn't yet work in Firefox, so some additional CSS is necessary to ensure it will displays correctly.
https://www.w3schools.com/css/css3_multiple_columns.asp
.split-me {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-moz-column-count: 3;
-moz-column-gap: 0;
column-count: 3;
column-gap: 0;
}
.cols {
/* column-span is 1 by default */
column-span: 1;
}
div.three-span {
column-span: all !important;
}
/* alternate style for column-span in Firefox */
#-moz-document url-prefix(){
.three-span {
position: absolute;
left: 8px;
right: 8px;
top: auto;
width: auto;
}
}
<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>
<div class='split-me'>
<div class='col-1 cols'>Text inside Column 1 div.</div>
<div class='col-2 cols'>Text inside Column 2 div.</div>
<div class='col-3 cols'>Text inside Column 3 div.</div>
<div class='three-span'>Text div spanning 3 columns.</div>
</div>
<style>
/* Non-Essential Visual Styles */
html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; }
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
border: 2px dashed black; border-top: none;
text-align: center; background-color: #ddffdd;
}
</style>
if you use div and span it will occupy more code size when the datagrid-table row are more in volume. This below code is checked in all browsers
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
CSS:
#gridheading {
background: #ccc;
border-bottom: 1px dotted #BBBBBB;
font-size: 12px;
line-height: 30px;
text-transform: capitalize;
}
.data {
border-bottom: 1px dotted #BBBBBB;
display: block;
font-weight: normal;
line-height: 20px;
text-align: left;
word-wrap: break-word;
}
h4 {
border-right: thin dotted #000000;
display: table-cell;
margin-right: 100px;
text-align: center;
width: 100px;
word-wrap: break-word;
}
.data .big {
margin-right: 150px;
width: 200px;
}
If you come here because you have to turn on or off the colspan attribute (say for a mobile layout):
Duplicate the <td>s and only show the ones with the desired colspan:
table.colspan--on td.single {
display: none;
}
table.colspan--off td.both {
display: none;
}
<!-- simple table -->
<table class="colspan--on">
<thead>
<th>col 1</th>
<th>col 2</th>
</thead>
<tbody>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
<tr>
<!-- the <td> spanning both columns -->
<td class="both" colspan="2">both</td>
<!-- the two single-column <td>s -->
<td class="single">A</td>
<td class="single">B</td>
</tr>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
<!--
that's all
-->
<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
tableClasses.toggle('colspan--on');
tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>
I came here because currently the WordPress table block doesn't support the colspan parameter and i thought i will replace it using CSS. This was my solution, assuming that the columns are the same width:
table {
width: 100%;
}
table td {
width: 50%;
background: #dbdbdb;
text-align: center;
}
table tr:nth-child(2n+1) {
position:relative;
display:block;
height:20px;
background:green;
}
table tr:nth-child(2n+1) td {
position:absolute;
left:0;
right:-100%;
width: auto;
top:0;
bottom:0;
background:red;
text-align:center;
}
<table>
<tr>
<td>row</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
You could always position:absolute; things and specify widths. It's not a very fluid way of doing it, but it would work.
I've created this fiddle:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
CSS
#table {
display:table;
}
.group {display: table-row-group; }
.row {
display:table-row;
height: 80px;
line-height: 80px;
}
.cell {
display:table-cell;
width:1%;
text-align: center;
border:1px solid grey;
height: 80px
line-height: 80px;
}
.caption {
border:1px solid red; caption-side: top; display: table-caption; text-align: center;
position: relative;
top: 80px;
height: 80px;
height: 80px;
line-height: 80px;
}
Media Query classes can be used to achieve something passable with duplicate markup. Here's my approach with bootstrap:
<tr class="total">
<td colspan="1" class="visible-xs"></td>
<td colspan="5" class="hidden-xs"></td>
<td class="focus">Total</td>
<td class="focus" colspan="2"><%= number_to_currency #cart.total %></td>
</tr>
colspan 1 for mobile, colspan 5 for others with CSS doing the work.
I'm trying to construct a layout similar to the following:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
where the bottom is filling the space of the upper row.
If this were an actual table, I could easily accomplish this with <td colspan="3">, but as I'm simply creating a table-like layout, I cannot use <table> tags. Is this possible using CSS?
There's no simple, elegant CSS analog for colspan.
Searches on this very issue will return a variety of solutions that include a bevy of alternatives, including absolute positioning, sizing, along with a similar variety of browser- and circumstance-specific caveats. Read, and make the best informed decision you can based on what you find.
There is no colspan in css as far as I know, but there will be column-span for multi column layout in the near future, but since it is only a draft in CSS3, you can check it in here. Anyway you can do a workaround using div and span with table-like display like this.
This would be the HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
And this would be the css:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
The only reason to use this trick is to gain the benefit of table-layout behaviour, I use it alot if only setting div and span width to certain percentage didn't fullfil our design requirement.
But if you don't need to benefit from the table-layout behaviour, then durilai's answer would suit you enough.
Another suggestion is using flexbox instead of tables altogether. This is a "modern browser" thing of course, but come on, it's 2016 ;)
At least this might be an alternative solution for those looking for an answer to this nowadays, since the original post was from 2010.
Here's a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table {
border: 1px solid red;
padding: 2px;
max-width: 300px;
display: flex;
flex-flow: row wrap;
}
.table-cell {
border: 1px solid blue;
flex: 1 30%;
}
.colspan-3 {
border: 1px solid green;
flex: 1 100%;
}
<div class="table">
<div class="table-cell">
row 1 - cell 1
</div>
<div class="table-cell">
row 1 - cell 2
</div>
<div class="table-cell">
row 1 - cell 3
</div>
<div class="table-cell colspan-3">
row 2 - cell 1 (spans 3 columns)
</div>
</div>
<div style="width: 100%;">
<div style="float: left; width: 33%;">Row 1 - Cell 1</div>
<div style="float: left; width: 34%;">Row 1 - Cell 2</div>
<div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
To provide an up-to-date answer: The best way to do this today is to use css grid layout like this:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
and the HTML
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
</div>
That isn't part of the purview of CSS. colspan describes the structure of the page's content, or gives some meaning to the data in the table, which is HTML's job.
I've had some success, although it relies on a few properties to work:
table-layout: fixed
border-collapse: separate
and cell 'widths' that divide/span easily, i.e. 4 x cells of 25% width:
.div-table-cell,
* {
box-sizing: border-box;
}
.div-table {
display: table;
border: solid 1px #ccc;
border-left: none;
border-bottom: none;
table-layout: fixed;
margin: 10px auto;
width: 50%;
border-collapse: separate;
background: #eee;
}
.div-table-row {
display: table-row;
}
.div-table-cell {
display: table-cell;
padding: 15px;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
text-align: center;
background: #ddd;
}
.colspan-3 {
width: 300%;
display: table;
background: #eee;
}
.row-1 .div-table-cell:before {
content: "row 1: ";
}
.row-2 .div-table-cell:before {
content: "row 2: ";
}
.row-3 .div-table-cell:before {
content: "row 3: ";
font-weight: bold;
}
.div-table-row-at-the-top {
display: table-header-group;
}
<div class="div-table">
<div class="div-table-row row-1">
<div class="div-table-cell">Cell 1</div>
<div class="div-table-cell">Cell 2</div>
<div class="div-table-cell">Cell 3</div>
</div>
<div class="div-table-row row-2">
<div class="div-table-cell colspan-3">
Cor blimey he's only gone and done it.
</div>
</div>
<div class="div-table-row row-3">
<div class="div-table-cell">Cell 1</div>
<div class="div-table-cell">Cell 2</div>
<div class="div-table-cell">Cell 3</div>
</div>
</div>
https://jsfiddle.net/sfjw26rb/2/
Also, applying display:table-header-group or table-footer-group is a handy way of jumping 'row' elements to the top/bottom of the 'table'.
You could trying using a grid system like http://960.gs/
Your code would be something like this, assuming you're using a "12 column" layout:
<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
Try adding display: table-cell; width: 1%; to your table cell element.
.table-cell {
display: table-cell;
width: 1%;
padding: 4px;
border: 1px solid #efefef;
}
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
</div>
The CSS properties "column-count", "column-gap", and "column-span" can do this in a way that keeps all the columns of the pseudo-table inside the same wrapper (HTML stays nice and neat).
The only caveats are that you can only define 1 column or all columns, and column-span doesn't yet work in Firefox, so some additional CSS is necessary to ensure it will displays correctly.
https://www.w3schools.com/css/css3_multiple_columns.asp
.split-me {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-moz-column-count: 3;
-moz-column-gap: 0;
column-count: 3;
column-gap: 0;
}
.cols {
/* column-span is 1 by default */
column-span: 1;
}
div.three-span {
column-span: all !important;
}
/* alternate style for column-span in Firefox */
#-moz-document url-prefix(){
.three-span {
position: absolute;
left: 8px;
right: 8px;
top: auto;
width: auto;
}
}
<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>
<div class='split-me'>
<div class='col-1 cols'>Text inside Column 1 div.</div>
<div class='col-2 cols'>Text inside Column 2 div.</div>
<div class='col-3 cols'>Text inside Column 3 div.</div>
<div class='three-span'>Text div spanning 3 columns.</div>
</div>
<style>
/* Non-Essential Visual Styles */
html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; }
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
border: 2px dashed black; border-top: none;
text-align: center; background-color: #ddffdd;
}
</style>
if you use div and span it will occupy more code size when the datagrid-table row are more in volume. This below code is checked in all browsers
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
CSS:
#gridheading {
background: #ccc;
border-bottom: 1px dotted #BBBBBB;
font-size: 12px;
line-height: 30px;
text-transform: capitalize;
}
.data {
border-bottom: 1px dotted #BBBBBB;
display: block;
font-weight: normal;
line-height: 20px;
text-align: left;
word-wrap: break-word;
}
h4 {
border-right: thin dotted #000000;
display: table-cell;
margin-right: 100px;
text-align: center;
width: 100px;
word-wrap: break-word;
}
.data .big {
margin-right: 150px;
width: 200px;
}
If you come here because you have to turn on or off the colspan attribute (say for a mobile layout):
Duplicate the <td>s and only show the ones with the desired colspan:
table.colspan--on td.single {
display: none;
}
table.colspan--off td.both {
display: none;
}
<!-- simple table -->
<table class="colspan--on">
<thead>
<th>col 1</th>
<th>col 2</th>
</thead>
<tbody>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
<tr>
<!-- the <td> spanning both columns -->
<td class="both" colspan="2">both</td>
<!-- the two single-column <td>s -->
<td class="single">A</td>
<td class="single">B</td>
</tr>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
<!--
that's all
-->
<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
tableClasses.toggle('colspan--on');
tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>
I came here because currently the WordPress table block doesn't support the colspan parameter and i thought i will replace it using CSS. This was my solution, assuming that the columns are the same width:
table {
width: 100%;
}
table td {
width: 50%;
background: #dbdbdb;
text-align: center;
}
table tr:nth-child(2n+1) {
position:relative;
display:block;
height:20px;
background:green;
}
table tr:nth-child(2n+1) td {
position:absolute;
left:0;
right:-100%;
width: auto;
top:0;
bottom:0;
background:red;
text-align:center;
}
<table>
<tr>
<td>row</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
You could always position:absolute; things and specify widths. It's not a very fluid way of doing it, but it would work.
I've created this fiddle:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
CSS
#table {
display:table;
}
.group {display: table-row-group; }
.row {
display:table-row;
height: 80px;
line-height: 80px;
}
.cell {
display:table-cell;
width:1%;
text-align: center;
border:1px solid grey;
height: 80px
line-height: 80px;
}
.caption {
border:1px solid red; caption-side: top; display: table-caption; text-align: center;
position: relative;
top: 80px;
height: 80px;
height: 80px;
line-height: 80px;
}
Media Query classes can be used to achieve something passable with duplicate markup. Here's my approach with bootstrap:
<tr class="total">
<td colspan="1" class="visible-xs"></td>
<td colspan="5" class="hidden-xs"></td>
<td class="focus">Total</td>
<td class="focus" colspan="2"><%= number_to_currency #cart.total %></td>
</tr>
colspan 1 for mobile, colspan 5 for others with CSS doing the work.
I simply want to achieve the effect where the left column has two merged rows and the one on right has none. How can I achieve this layout?
The html table will look like -
<table border="1" >
<tr>
<td rowspan="2">Div 1</td>
<td> Div 2 </td>
</tr>
<tr>
<td>Div3</td>
</tr>
</table>
Edit: I want to acheive this using Div. I would be putting User control in each div element. It is important that Div3 starts below div2 but not below Div1.
[Sorry, this is first post so cannot add image]
Thanks.
CSS
body {
margin: 0;
padding: 50px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
.tablewrapper {
position: relative;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
padding: 1em;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell">
Top left
</div>
<div class="rowspanned cell">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell">
Bottom left
</div>
<div class="empty cell"></div>
<div class="cell">
Bottom right
</div>
</div>
</div>
</div>
Demo: http://www.sitepoint.com/rowspans-colspans-in-css-tables/
Grid layout was introduced in 2017 for exactly this purpose, and possibly much more complex ones.
In your case, you can use e.g. inline-grid + grid-template-areas:
#page {
display: inline-grid;
grid-template-areas: "aside main"
"aside foot";
}
#page > aside {
grid-area: aside;
background: lightgreen;
}
#page > main {
grid-area: main;
background: lightpink;
}
#page > footer {
grid-area: foot;
background: lightblue;
}
<section id="page">
<aside>aside 1</aside>
<main>main 2</main>
<footer>footer 3</footer>
</section>