Vuetify table same width on all cells - css

Question

I would like to replicate the same design as in this screenshot:
I have been able to replicate some of this design styling the vuetify data table with the following CSS:
.v-data-table {
#extend .elevation-0;
.v-data-table__wrapper {
table {
td,
th {
padding-left: 16px !important;
min-width: 170px !important;
border: 1px solid #e8e8e8 !important;
border-bottom: none !important;
font: 14px/40px !important;
text-align: left !important;
}
td {
color: #666 !important;
}
tr {
display: block !important;
}
th {
color: #333 !important;
}
tbody {
tr {
#include radius(xl);
#include elevation(4, true);
margin: 20px 5px;
background-color: #fbfbfb !important;
cursor: pointer !important;
}
}
thead.v-data-table-header tr {
th {
color: #818087 !important;
box-shadow: none !important;
border: none !important;
border-bottom: none !important;
}
}
tbody tr td {
border: none !important;
height: 65px;
}
}
}
}
The only problem I'm facing is that some of the rows are not alligned with the values of each cell:
As you can see the current table doesn't have the Plans header alligned with it's values. If the usere have more than one activity group the cell takes up too much space.
You can check out a minimum reproducible problem here: https://codepen.io/teresakk/pen/MWyXaWv

Answer 1

I have solved the problem with the help from another answer on stackoverflow:
(https://stackoverflow.com/a/16971333/4581336)
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
th {
background-color: map-get($grey, 'lighten-5') !important;
border: none !important;
box-shadow: none !important;
}
td {
border: solid 1px transparent;
border-style: solid none;
padding: 20px;
background-color: map-get($shades, 'white');
height: 60px !important;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}