我想在<tbody>元素上添加border-radius样式。
<tbody>
border-radius
<table> <thead>...</thead> <tbody style="border: 1px solid red; border-radius: 12px;"> <tr> <td>...</td> </tr> </tbody> </table>
border渲染正确,不幸的是没有四舍五入。
border
lstz6jyr1#
您可以尝试将box-shadow与border-radius一起使用。
box-shadow
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>
gg58donl2#
下面是一个适合我的解决方案:
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>
ttisahbt3#
tbody{ display:table; border: 1px solid red; border-radius: 12px; }
<table> <thead> <th>head...</th> </thead> <tbody > <tr> <td>test...</td> </tr> </tbody> </table>
jjjwad0x4#
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>
gr8qqesn5#
折叠表格中的边框
border-collapse: collapse;
尝试在tbody样式中添加此内容
display:block
在此看到类似的问题Is there a clean way to get borders on a in pure CSS?
50few1ms6#
我建议使用单独的样式,比如<style>标记或外部样式表,而不是内联样式。
<style>
<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>
6条答案
按热度按时间lstz6jyr1#
您可以尝试将
box-shadow
与border-radius
一起使用。gg58donl2#
下面是一个适合我的解决方案:
ttisahbt3#
jjjwad0x4#
gr8qqesn5#
折叠表格中的边框
尝试在tbody样式中添加此内容
在此看到类似的问题
Is there a clean way to get borders on a in pure CSS?
50few1ms6#
我建议使用单独的样式,比如
<style>
标记或外部样式表,而不是内联样式。