Make HTML Table behave like `justify-content: space-between` - html

is there a way to make table columns behave like the justify-content: space-between from flexbox.
I want the first and the last column be at the end and the start and the rest should be fitted in the middle of these two.


You can achieve this behavior using a combination of CSS and HTML
<table class="table">
<tr>
<td class="first">First Column</td>
<td class="middle">Middle Column 1</td>
<td class="middle">Middle Column 2</td>
<td class="last">Last Column</td>
</tr>
</table>
.table {
width: 100%;
table-layout: fixed;
}
.first {
text-align: left;
}
.last {
text-align: right;
}
.middle {
text-align: center;
width: 25%;
}

Related

Gridbox: Shrink contents of grid row to make two equal height rows

Assume I have a gridbox with 4 columns and 1 row. Parent container 1 & 2 are children of this gridbox. Parent container1 has a colspan of 3 and container2 has a colspan of 1 column. Both container have multiple child components, that are responsive and change size on window resize. Child 5 components has a table inside, that contains over 250+ records. The goal is to make this table scrollable, with perfectly equal content height of gridbox and without knowing any dimensions of parent or child containers.
So parent container2 has to be same height as parent container1, therefore something has to be done with child5
JSFiddle example
Expected layout: (Same row height and scrollable table)
Current layout: (Unequal content height, table is not scrollable)
I tried implementing flexbox for this scenario, but it seemed to make things harder. I also tried adding display: flex and flex: flex-shrink to the child5 container but with no results whatsoever.
I know I can programmatically take the height of container1 and calculate the needed height of child5 but I feel like there's more elegant solution using CSS + I don't wanna add too much event listeners on window resize.
Would love to take a look at your suggestions.

It is possible to apply display: flex for your .container1 class and use flex property:
*, html, body {
box-sizing: border-box;
margin: 0;
}
body {
font-family: sans-serif;
font-weight: 600;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
border: 1px solid black;
padding: 5px;
}
.container1 {
grid-column: 1/4;
background: blue;
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
}
.container1 div {
flex: 1;
}
.container2 {
background: red;
}
.child, .child1, .child3, .child5 {
border: 1px solid black;
padding: 15px;
background: gray
}
.container1, .container2 {
border: 1px solid black;
padding: 5px;
}
.table, th, td {
border: 1px solid black;
width: 100%;
}
.child1, .child3 {
padding: 40px 15px 40px 15px;
}
.child5 {
overflow-Y: scroll;
}
<div class="grid">
<div class="container1">
parent container 1
<div class="child1">
child 1
</div>
<div class="child">
child 2
</div>
<div class="child3">
child 3
</div>
</div>
<div class="container2">
parent container 2
<div class="child">
child 4
</div>
<div class="child5">
child 5
<table>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
<tr>
<th>prop</th>
<th>value</th>
</tr>
</table>
</div>
</div>
</div>

Flexbox in table cell appears in the vertical middle

I am using flexbox in a table.
The table has 2 columns, each with one cell.
The left cell is very big, and has a height of maybe 189%.
My CSS is as follows:
#openemail {
display: flex;
flex-flow: column;
height: 100%;
}
#openemail>#header {
flex: 0 1 auto;
}
#openemail>#body {
flex: 1 1 auto;
}
<table id="app">
<tr>
<td>
<div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</td>
<td>
<div id="openemail">
<div id="header">SSS</div>
<div id="body">more SSS</div>
</div>
</td>
</tr>
</table>
As you can see, the flex container ends up in the middle, and is hard to find. My question is: how can I change my CSS so that the flex container is at the top of my table cell?

Would adding vertical-align: top to the table cell do what you want it to do? Like this:
<table id="app">
<tr>
<td>
<div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</td>
<td style="vertical-align: top;">
<div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
</td>
</tr>
</table>

RECOMMENDED:
Applying vertical-align: top to <td> seems to be the optimal solution in 2018, which is fully supported in CSS3 and HTML5. Here's a working sample:
table, th, td {
border: 1px solid black;
}
#openemail {
display: flex;
flex-flow: column;
height: 100%;
}
#openemail>#header {
flex: 0 1 auto;
}
#openemail>#body {
flex: 1 1 auto;
}
<table id="app">
<tr>
<td>
<div id="emailslist">
placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td>
<td style="vertical-align: top">
<div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
</td>
</tr>
</table>
To learn more about the vertical-align style: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
NOT RECOMMENDED:
The following solution could also work if you are using older versions of HTML: setting the valign attribute of <td> to be top. It looks something like this:
table, th, td {
border: 1px solid black;
}
#openemail {
display: flex;
flex-flow: column;
height: 100%;
}
#openemail>#header {
flex: 0 1 auto;
}
#openemail>#body {
flex: 1 1 auto;
}
<table id="app">
<tr>
<td>
<div id="emailslist">
placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td>
<td valign="top">
<div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
</td>
</tr>
</table>
To learn more about the valign attribute: https://www.w3schools.com/tags/att_td_valign.asp
Hope this helps!

Since you're dealing with table cells, the vertical-align property comes into play. This property applies to inline-level and table-cell elements only.
The default value of the vertical-align property, according to the spec, is baseline. However, major browsers tend to use the middle value instead.
In any case, the content of your table cell is vertically centered.
You can override this setting with vertical-align: top.
More details: Default value of vertical-align for table cells

How to assign height of table row in CSS and place every row under the other starting from top?

.block {
width: 445px;
height: 544px;
border-bottom: 1px solid rgba(24, 24, 28, 0.45);
}
.table {
width: 100%;
height: 100%;
border-spacing: 3px;
border-collapse: separate;
}
.row {
height: calc(100% / 7);
width: 100%;
}
.cell {
width: calc(100% / 7);
height: auto;
text-align: center;
font-size: 24px;
font-weight: bold;
}
<div class="block">
<table class="table">
<tr class="row">
<td class="cell">A</td>
<td class="cell">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
</tr>
<tr class="row">
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
<td class="cell">6</td>
<td class="cell">7</td>
</tr>
</table>
</div>
I have a problem with height of the row element - I want it to be height of table (100%) divided by 7 (and I have calc(100% / 7)), but it doesn't work. As you see on the screen - it is 267px and should be much less. I want this rows to start on the top of the table with normal height (so there should be two rows, one under the other and a lot of blank space underneath, because the table have 100% height of block element). I am creating rows dynamically and they will fill all the table (so I will have 7 rows which will have the same height and which will fill all the table). Where I made a mistake? Thanks for your help!
Desired output with two rows:
Desired output with seven rows:

You just need to define a display property on the row for the height to take effect.
See this example: https://jsfiddle.net/dieguezz/q2j6me6h/
.row {
height: calc(100% / 7);
width: 100%;
display: flex;
align-items: center;
}

How to create multiple columns in a page that continues the previus colum content. - HTML, CSS

First, sorry for any grammatical mistakes, I'm not an expert in English.
So, what I need is to separate my page in three colums that suport one table, when this table reachs to a, for example, height: 1000px in a colum it will go to the other colum.
I tried to do an quick example in Paint:
Everything that I tried just separate the page in three columns but they don't interact with each other as I want. There's any way to do that?
P.S: This table is created from my database, so it's not a fixed table.

I feel at some point when it's a standard, this would be a decent use-case for CSS Grid Layout, or at least it might be more semantic that way. But for now you can definitely apply flexbox styling to a <table>:
table {
/* forces the table to be full width
even without enough content */
display: block;
}
tbody {
border: 1px solid black;
/* display flex will reflow child elements
once they hit a limit in their parent */
display: flex;
/* flex-flow sets the direction to flow child elements,
and if they should wrap when hitting
the end of their parent */
flex-flow: column wrap;
max-height: 80px;
width: 100%;
}
tr {
border: 1px solid #bad;
/* the 33% (the flex basis) is how i'm
getting 3 columns, adjusting this will adjust
your number of columns, it's not the most general solution,
but it'll work for you case */
flex: 0 0 33%;
}
td {
border: 1px solid #ace;
}
<table>
<tbody>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
</tbody>
</table>

I think it is possible with flexbox. You set a height for the parent element and add flex-direction: column and flex-direction: wrap
<div class="wrapper">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
.wrapper {
height: 100vh;
width: 450px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.wrapper .element {
background: red;
margin: 10px;
height: 45vh;
width: 100px;
}
http://jsfiddle.net/fyj1htwk/

Drop last cell in a table to a new row with flex-basis active

I am trying to get a unique table cell to drop to a new row take up 100% width. The project is using flex in the table so I have tried other methods with no success, such as colspan.
Edit: I have an angular directive in the <tr>, so this makes it difficult to just add a new <tr>
I was hoping someone could help me out with this. A simple structure of the project looks like so:
<tr *ngIf="exampleFunction">
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td class="special">data</td>
</tr>
The fiddle link is below.
https://jsfiddle.net/o4Luzbju/

Display the table rows as multiline flex containers. Use flex to make the cells distribute the space equally, but force a 100% width to the special cell.
table {
width: 100%;
}
tr {
display: flex;
flex-wrap: wrap;
}
td {
flex: 1;
border: 1px solid grey;
}
.special {
flex-basis: 100%;
box-sizing: border-box;
}
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td class="special">special data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td class="special">special data</td>
</tr>
</tbody>
</table>

It makes no sense to use a table to do what you want. If you want that cell to be a new row on its own, then it should be inside its own <tr></tr>.
Use div instead of tables, which is much better adapted to your situation.

A table cell is a child of its parent row container.. To do something like that, what you can do is hide the border of that last cell in table and place nothing in that cell..then create a new row
example
table {
width: 100%;
}
td {
flex: 100%;
flex-basis: 200px;
min-width: 200px;
border: 1px solid grey;
}
.special {
text-align: center;
}
#null {
border: none
}
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td id='null'></td>
</tr>
<tr>
<td class="special">Special data</td>
</tr>
</tbody>
</table>

You can set the table row (<tr>) to be the flex container, with option to wrap items onto a new row.
Then set the td.special's initial width to be 100%.
table {
width: 100%;
}
tr {
display: flex; /* Initiate flexbox on the container */
flex-wrap: wrap; /* Let flex items wrap to new line */
}
td {
flex: 1 0 auto; /* Flex item to grow to available width */
border: 1px solid grey;
}
td.special {
flex: 1 0 100%; /* Flex item's initial width to be 100% */
}