Currently, I am utilizing the border-collapse: separate property to introduce spacing between table rows in my design. However, I am facing a challenge when trying to eliminate the space above the initial table row. What would be the most effective approach to address this issue?
The following is a visual representation of how my table appears at present.
https://i.sstatic.net/LR5DZHad.png
Here is the code snippet that I am working with:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
.table-container {
width: 400px;
background-color: grey;
padding: 0px 10px 10px 10px;
}
table {
border-collapse: separate;
border-spacing: 0px 7px;
width: 100%;
}
tr {
background-color: #dc2626;
color: white;
}
td {
padding: 5px;
}
tbody tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tbody tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tbody>
<tr><td>value 1</td><td>value2</td></tr>
<tr><td>value3</td><td>value4</td></tr>
</table></tbody>
</table>
</div>
<script>
</script>
</body>
</html>I made an attempt by using the border-collapse: collapse property and setting border-bottom. Although it successfully removed the spacing above the first row, it caused issues with achieving rounded corners on all table rows. Below is a quick demonstration of the modified code:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
.table-container {
width: 400px;
background-color: grey;
padding: 0px 10px 10px 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #dc2626;
color: white;
border-bottom: 7px solid grey;
}
td {
padding: 5px;
}
tbody tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tbody tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tbody>
<tr><td>value 1</td><td>value2</td></tr>
<tr><td>value3</td><td>value4</td></tr>
</table></tbody>
</table>
</div>
<script>
</script>
</body>
</html>Is there a method that allows for both the elimination of spacing above the initial row and the implementation of rounded corners on all row elements within the table?