I am trying to design a responsive table showcasing artists' names. The goal is to have it look similar to this example:
After finding and customizing code for the table, I encountered an issue when the table collapses on mobile view. The invisible elements are still taking up space, causing gaps in the list of names: View issue here: https://codepen.io/alanvkarlik/pen/GReVOjV (Note: Borders around cells will be removed in the final version)
The code may seem complex, but I am unsure how to address this issue.
In Desktop view, I aim to separate each row with artist names using ✧ symbols, as seen on
/* Page styling
================================== */
html {
height: 100%;
background-color: #EEE;
}
body {
box-sizing: border-box;
min-height: 100%;
margin: 0 auto;
padding: 2em;
max-width: 800px;
font-size: 1.2em;
background-color: white;
text-align: center;
}
/* Tables
================================== */
.Rtable {
display: flex;
flex-wrap: wrap;
margin: 0 0 3em 0;
padding: 0;
position: relative;
top: 3px;
left: 3px;
}
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%;
padding: 4px;
overflow: hidden;
list-style: none;
border: solid 3px white;
background: rgba(112, 128, 144, 0.2);
}
.Rtable-cell-gap {
border: solid 3px white;
background: rgba(112, 128, 144, 0.2);
}
.Rtable-cell,
.Rtable-cell-gap {
margin: -3px 0 0 -3px;
background-color: white;
border-color: #e2e6e9;
}
/* Table column sizing
================================== */
.Rtable--5cols>.Rtable-cell {
width: 30%;
}
.Rtable--5cols>.Rtable-cell-gap {
width: 5%;
}
/* Responsive
===========...