I am using border-collapse: separate property to add spacing between table rows, and I would like to remove the spacing above the very first table row. What’s the best way to do that?
This is what my table looks like right now.
Below is my code
<code><!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></code>
<code><!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></code>
<!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 tried using border-collapse: collapse property and setting border-bottom, which removed the spacing above the first row successfully, however, the rounded corners did not work. Bellow is the code example.
<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></code>
<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></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 way to achieve both – remove the spacing above the first row and have rounded corners on all table rows?