如何在表格上创建圆角并为整个表格和列保留表格边框？ [复制]

Posted 2023-03-05

【中文标题】如何在表格上创建圆角并为整个表格和列保留表格边框？ [复制]

【英文标题】：How to create rounded corners on a table and keep table border for the whole table and columns? [duplicate]

【发布时间】：2021-02-28 22:57:41

【问题描述】：

我需要创建一个带有圆角的表格，并且表格内只有列边框。行之间不应有边框。

我尝试创建圆角，但折叠属性应该是折叠或表格内的列边框将为 2。如果我按照其他答案的建议将折叠属性保持为独立，则列边框不会折叠。我不确定如何完成这项工作。

table 
  position: relative;
  top: 80px;
  left: 15px;
  border: 1px solid #000000 !important;
  border-collapse: collapse;


th,
td 
  padding-left: 15px;
  padding-right: 15px;
  border-left: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;

<table class="status-table">
  <tr>
    <td>RA-STATUS</td>
    <td>Due Date</td>
    <td>Assigned To</td>
    <td>Last Updated</td>
  </tr>
  <tr>
    <td>Open-Draft</td>
    <td>04/20/2012</td>
    <td>John Doe(for you)</td>
    <td>03/28/2012 | By: John Doe</td>
  </tr>
</table>

【问题讨论】：

你能展示设计吗，你想要看起来像

这能回答你的问题吗？ CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

您好，欢迎来到 SO。请先使用搜索功能。您的问题已经被多次询问，并且已经有很多解决方案：***.com/questions/628301/… --- 因此，您的问题将被标记为重复并关闭。

【参考方案1】：

表格的圆角和列的边框

table 
    position: relative;
    top: 80px;
    left: 15px;
    border: 1px solid #000000;
    border-collapse: collapse;
    border-radius: 10px;
    display: inline-block;


th,
td 
    padding-left: 15px;
    padding-right: 15px;


td 
    border-left: 1px solid #000000;


td:first-child 
    border-left: 0px;

<table class="status-table">
    <tr>
        <td>RA-STATUS</td>
        <td>Due Date</td>
        <td>Assigned To</td>
        <td>Last Updated</td>
    </tr>
    <tr>
        <td>Open-Draft</td>
        <td>04/20/2012</td>
        <td>John Doe(for you)</td>
        <td>03/28/2012 | By: John Doe</td>
    </tr>
</table>