I developed a table using the bootstrap. The objective was to obtain a table in which the rows have a background color and each row in the table must be separate.
My problem is that when separating the rows of the table, a spacing appears between the rows of the column.
How can I remove this blank spacing, thus filling the entire line with the background color?
.tableTitles {
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
color: #4D4F5C;
}
.circle {
width: 32px;
height: 32px;
border-radius: 8px;
line-height: 32px;
text-align: center;
background: #4981C226;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #4981C2;
}
.tableColor {
/* background: #F4F5F7 0% 0% no-repeat padding-box; */
border-radius: 8px;
}
.myTable {
border-collapse: separate;
border-spacing: 7px;
}
.tableUserPhoto {
width: 24px;
height: 24px;
transform: matrix(1, 0, 0, 1, 0, 0);
border-radius: 8px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><table class="card-table table-borderless myTable"><thead><tr><th scope="col tableTitles">Title</th><th scope="col tableTitles">Title1</th><th scope="col tableTitles">Title2</th><th scope="col tableTitles">Title3</th></tr></thead><tbody><tr style="background-color: grey"><td class="tableTitles">
Title</td><td class="tableTitles">
Title1</td><td class="tableTitles">
Title2</td><td class="tableTitles">
Title3</td></tr><tr style="background-color: grey"><td class="tableTitles">
Title</td><td class="tableTitles">
Title1</td><td class="tableTitles">
Title2</td><td class="tableTitles">
Title3</td></tr></tbody></table>Problem
