Flexbox based table - html

Question

I want to build a table with multiple columns with dynamic data. This leads to inability to use base <table> since it would change its columns width when content changes. Also I need to implement an option to hide some columns via JS.
Therefore I've decided to build a flexbox based table. However, I struggle with how to deal with column width when I hide some columns.
For example I have next table
.table {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
min-height: 200px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.table-head {
color: #a4a;
font-weight: 500;
}
.table-cell {
padding: 10px;
flex-grow: 1;
width: 100%;
overflow: hidden;
}
.table-cell:nth-child(1) {
width: 20%;
}
.table-cell:nth-child(2) {
width: 10%;
}
.table-cell:nth-child(3) {
width: 30%;
}
.table-cell:nth-child(4) {
width: 20%;
}
.table-cell:nth-child(5) {
width: 20%;
}
<div class="table">
<div class="row">
<div class="table-cell table-head">
Name
</div>
<div class="table-cell table-head">
Phone number
</div>
<div class="table-cell table-head">
Email
</div>
<div class="table-cell table-head">
Address
</div>
<div class="table-cell table-head">
Country
</div>
</div>
<div class="row">
<div class="table-cell">Peter</div>
<div class="table-cell">123123</div>
<div class="table-cell">peter#example.com</div>
<div class="table-cell">asdsad</div>
<div class="table-cell">empty</div>
</div>
<div class="row">
<div class="table-cell">Bob</div>
<div class="table-cell">123124</div>
<div class="table-cell">bob#bob.com</div>
<div class="table-cell">sadsads</div>
<div class="table-cell">empty</div>
</div>
</div>
And I want to hide 4th column. Since there some extra space has been created the rest columns should take it and become bigger.
How do I make columns to take their width and have some ratio? For example the address column should be bigger than country column. Also there could be a case when there is only one column left so that it should take 100% width.
I've tried to use flex-grow to make width, however I ended up with the problem that my columns even are not equal (head row had its own proportions and body it own) thus even no table layout when there is no columns hidden.

Answer 1

use flex:1 or 2, 3,... instead of width
.table {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
min-height: 200px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.table-head {
color: #a4a;
font-weight: 500;
}
.table-cell {
padding: 10px;
flex:1;
overflow: hidden;
}
.table-cell:nth-child(1) {
flex:3;
}
.table-cell:nth-child(2) {
flex:3;
}
.table-cell:nth-child(3) {
flex:3;
}
.table-cell:nth-child(4) {
flex:6;
}
.table-cell:nth-child(5) {
flex:2;
}
<div class="table">
<div class="row">
<div class="table-cell table-head">
Name
</div>
<div class="table-cell table-head">
Phone number
</div>
<div class="table-cell table-head">
Email
</div>
<div class="table-cell table-head">
Address
</div>
<div class="table-cell table-head">
Country
</div>
</div>
<div class="row">
<div class="table-cell">Peter</div>
<div class="table-cell">123123</div>
<div class="table-cell">peter#example.com</div>
<div class="table-cell">asdsad</div>
<div class="table-cell">empty</div>
</div>
<div class="row">
<div class="table-cell">Bob</div>
<div class="table-cell">123124</div>
<div class="table-cell">bob#bob.com</div>
<div class="table-cell">sadsads</div>
<div class="table-cell">empty</div>
</div>
</div>
i remove fourth table-cell with jquery:
$(document).ready(function(){
$('.table-cell:nth-child(4)').fadeOut(1000);
})
.table {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
min-height: 200px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.table-head {
color: #a4a;
font-weight: 500;
}
.table-cell {
padding: 10px;
flex:1;
overflow: hidden;
}
.table-cell:nth-child(1) {
flex:3;
}
.table-cell:nth-child(2) {
flex:3;
}
.table-cell:nth-child(3) {
flex:3;
}
.table-cell:nth-child(4) {
flex:6;
}
.table-cell:nth-child(5) {
flex:2;
}
<div class="table">
<div class="row">
<div class="table-cell table-head">
Name
</div>
<div class="table-cell table-head">
Phone number
</div>
<div class="table-cell table-head">
Email
</div>
<div class="table-cell table-head">
Address
</div>
<div class="table-cell table-head">
Country
</div>
</div>
<div class="row">
<div class="table-cell">Peter</div>
<div class="table-cell">123123</div>
<div class="table-cell">peter#example.com</div>
<div class="table-cell">asdsad</div>
<div class="table-cell">empty</div>
</div>
<div class="row">
<div class="table-cell">Bob</div>
<div class="table-cell">123124</div>
<div class="table-cell">bob#bob.com</div>
<div class="table-cell">sadsads</div>
<div class="table-cell">empty</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>