How to add border-radius on <tbody> element? - html

Question

I want to add the border-radius style on the <tbody> element.
<table>
<thead>...</thead>
<tbody style="border: 1px solid red; border-radius: 12px;">
<tr>
<td>...</td>
</tr>
</tbody>
</table>
The border renders correctly, unfortunately without rounding.

Answer 1

You can try using box-shadow along with border-radius.
tbody {
box-shadow: 0 0 0 1px red;
border-radius: 10px;
}
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>

Answer 2

Here is a solution that works for me :
body {
background-color: #2b7b2b;
}
table tbody {
background-color: white;
}
table tbody td {
display: table-cell
}
table tbody tr:first-child td:first-child {
border-top-left-radius: 5px;
}
table tbody tr:first-child td:last-child {
border-top-right-radius: 5px;
}
table tbody tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
table tbody tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
<div class="body">
<table>
<thead>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>

Answer 3

tbody{
display:table;
border: 1px solid red;
border-radius: 12px;
}
<table>
<thead>
<th>head...</th>
</thead>
<tbody >
<tr>
<td>test...</td>
</tr>
</tbody>
</table>

Answer 4

table{
width: 100%;
border-collapse: collapse;
}
table td{
padding: 5px;
}
table tbody td{
border: 1px solid #19dbd0;
text-align: center;
}
table tbody tr:first-child td {
border-top: none;
border-right: none;
}
table tbody tr:last-child td {
border-bottom: none;
border-right: none;
}
table tbody tr td:first-child {
border-left: none;
}
table tbody{
box-shadow: 0 0 0 2px #19dbd0;
border-radius: 10px;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</tbody>
</table>

Answer 5

collapse the borders in the table
border-collapse: collapse;
try adding this in the tbody style
display:block
see similar question here
Is there a clean way to get borders on a in pure CSS?

Answer 6

I would suggest using a separate style, such as a <style> tag or an external style sheet, rather than styling inline.
<table id="myTable">
<thead>header</thead>
<tbody >
<tr>
<td>td content</td>
</tr>
</tbody>
</table>
<style>
#myTable{
border: 1px solid black;
border-radius: 12px;
}
</style>