I am trying to create a 4x4 array of content using css tables. The cells should be evenly sized. I got a fix to a problem with the cells going out of the parent div. However that broke the height of the cells.
What is wrong here? All the rows should be 25% of the container, with the cells inheriting that. What seems to happen is the first row grows as much as it can, and the 3 remaining ones scale according to the content... Why?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body {
display: block;
height: 100%;
width: 100%;
}
div {
display: block;
}
#container {
background-color: #CCF;
position: absolute;
height: 100%;
width: 100%;
}
.sideBySide {
position: absolute;
float: left;
top: 0px;
height: 100%;
}
#galleria {
background-color:#0C0;
left: 0px;
right: 300px;
width: auto;
}
#tagit {
background-color: #099;
right: 0px;
width: 300px;
}
#table {
position: absolute;
display: table;
height: 100%;
width: 100%;
}
.table-row {
position: relative;
display: table-row;
width: 100%;
height: 25%;
}
.table-cell {
position: relative;
display: table-cell;
height: 100%;
width: 20%;
padding: 20px;
}
.kuva {
position: relative;
width: 100%;
height: 100%;
margin: 10px;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="galleria" class="sideBySide">
<div id="table">
<div class="table-row">
<div class="table-cell">
<div class="kuva">
Kuva1
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva2
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva3
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva4
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
Kuva1
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva2
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva3
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva4
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
text
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
test
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
</div>
</div>
</div>
<div id="tagit" class="sideBySide">.</div>
</div>
</body>
</html>
just keeping everything in the flow and dispatching display table/table-row/table-cell to different levels you can get to something like this :
http://codepen.io/anon/pen/pvDwk
To get rid of scrollbar when table can feet window do not forget to add body{margin:0;}
Related
I want to make a different boxes in a row: one - 33% width, second - 66% width. In a row below this I want to make same sized boxes but in reverse position like below on the picture:
Can't use every time new row with row-reverse style because client wants edit boxes in Wordpress using ACF Repeater, so it should be done only by CSS.
.row {
display: flex;
flex-wrap: wrap;
}
.box {
height: 100px;
margin-bottom: 10px;
}
.box:nth-child(even) {
flex: 0 0 66.666%;
max-width: 66.666%;
}
.box:nth-child(odd) {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.box__item {
height: 100%;
border: 1px solid #000;
margin: 15px;
}
<div class='row'>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
</div>
You can do with nth-child()
.row {
display: flex;
flex-wrap: wrap;
}
.box {
height: 100px;
margin-bottom: 10px;
}
.box:nth-child(4n),
.box:nth-child(4n-3){
flex: 0 0 66.666%;
max-width: 66.666%;
}
.box:nth-child(4n-1),
.box:nth-child(4n-2){
flex: 0 0 33.333%;
max-width: 33.333%;
}
.box__item {
height: 100%;
border: 1px solid #000;
margin: 15px;
}
<div class='row'>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
</div>
I've created a grid-based table replacement.
The grid is meant to keep table headers on the top when scrolling, for that I've utilized position: sticky;.
While it works flawlessly, it doesn't seem to care if I set resize: horizontal; on it, it just won't let me - I can have either, but not both.
Is there a workaround? Sorry if I don't post the HTML code, it's generated by vue and it's rather unreadable, plus I would have to post vue component contents.
Here's SASS thought:
.table {
display: grid;
overflow-y: scroll;
grid-template-columns: repeat(var(--columnCount), minmax(min-content, 1fr));
max-height: 100px;
}
.table-headers {
display: contents;
top: 0;
}
.table-headers > .table-header:last-of-type > .table-header-resizer {
display: none;
}
.table-header {
top: 0;
display: flex;
position: sticky;
font-weight: 700;
border-right: 1px solid #D5E3EA;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid #D5E3EA;
background: #F7F7F7;
}
.table-header:last-of-type {
border-right: none;
}
.table-header-cell {
display: flex;
flex-grow: 1;
resize: horizontal;
padding: 8px;
}
.table-row {
display: contents;
}
.table-row > .table-cell {
background: #f4f4f4;
border-top: 1px solid #D5E3EA;
}
.table-row > .table-cell:nth-of-type(even) {
background: #f2f2f2;
}
.table-cell {
display: flex;
flex-grow: 1;
padding: 8px;
border-right: 1px solid #D5E3EA;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.table-cell:last-of-type {
border-right: none;
}
<div class="table" style='--columnCount: 3;'>
<div class="table-headers">
<div class="table-header">
<div class="table-cell">
One
</div>
</div>
<div class="table-header">
<div class="table-cell">
Two
</div>
</div>
<div class="table-header">
<div class="table-cell">
Three
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
</div>
If you have the same issue, simply put a nested child inside your sticky element and set resize on it instead.
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
In my code,
Within one container Three blocks will be there. one freezes on the left and one freezes on the right and the other will scroll in between these two divs. Just like modern grids. But I don't want to use the grid.
I have tried, but the center block is not getting the Horizontal scroll.
I want no breakage of the center block, instead, it should scroll horizontally.
* {
box-sizing: border-box;
}
.container {
width: 100%;
overflow: auto;
white-space: nowrap
}
.scroll-center {
width: auto;
overflow: auto;
display: block;
white-space: nowrap
}
.row {
float: left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
<div class="container">
<div class="row">
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
<div class="scroll-center">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
You probably need to add width to your container. Right now it's set to 100% so it will not size beyond the browser window. Instead you could do something like this:
.container {
overflow: auto;
white-space: nowrap;
width:2000px;
}
I realize that you may need to change this value dynamically but hopefully this gets you started
Example:http://codepen.io/nilestanner/pen/jAjbdK
Try with For example:
css:
* {
box-sizing: border-box;
}
.left, .center, .right{
float:left
}
.center {
width:400px;
overflow: scroll;
display: block;
white-space: nowrap
}
#center-scroll{
width:2000px;
}
.center .row{
display:inline-block;
width:33%;
}
.center .row .cell{
min-width:100%;
}
.row{
float:left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
HTML
<div class="container">
<div class="left">
<div class="row" >
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
</div>
<div class="center">
<div id="center-scroll">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
In this sample all the columns share the same height:
http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
In my sample: http://codepen.io/helloworld/pen/ogrjML
The same css code does not produce the same output of same height columns.
What do I wrong?
I can not use Flexbox!
<div class="container">
<div class="row">
<div class="row-same-height row-full-height">
<div style="background:orange;" class="col-xs-9 col-xs-height col-full-height">
<div class="item">
<div class="content">
<br><br><br><br><br><br><br>
</div>
</div>
</div>
<div style="background:red;" class="col-xs-3 col-xs-height col-full-height">
<div class="item"><div class="content">test2</div></div>
</div>
</div>
</div>
</div>
There are some styles in the minimit example that are not included in bootstrap. You need to add the following to get the heights you desire:
.row-same-height {
display: table;
width: 100%;
}
.col-xs-height {
display: table-cell;
float: none;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
Demo