圓桌角僅 CSS

Question

我已經搜索和搜索，但無法找到滿足我要求的解決方案。

我有一個普通的 HTML 表格。 我想要它的圓角，不使用圖像或 JS，即純CSS 。 像這樣：

角單元格的圓角和單元格的1px厚邊框。

到目前為止，我有這個：

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

但這讓我對細胞沒有任何邊界。 如果我添加邊框，它們不是圓角的！

有什么解決辦法嗎？

Answer 1

似乎在具有單獨邊框的 FF 和 Chrome 中工作正常（尚未測試任何其他）：http: //jsfiddle.net/7veZQ/3/

編輯：這是你的草圖的一個相對干凈的實現：

 table { border-collapse:separate; border:solid black 1px; border-radius:6px; } td, th { border-left:solid black 1px; border-top:solid black 1px; } th { background-color: blue; border-top: none; } td:first-child, th:first-child { border-left: none; }

 <table> <thead> <tr> <th>blah</th> <th>fwee</th> <th>spoon</th> </tr> </thead> <tr> <td>blah</td> <td>fwee</td> <td>spoon</td> </tr> <tr> <td>blah</td> <td>fwee</td> <td>spoon</td> </tr> </table>

http://jsfiddle.net/MuZzz/3577/

Answer 2

選擇的答案很糟糕。 我將通過定位角表單元格並應用相應的邊框半徑來實現這一點。

要獲得頂角，請在第 th 個元素的類型的第一個和最后一個上設置邊框半徑，然后在tr類型的最后一個上設置td類型的最后一個和第一個的邊框半徑以獲取底角。

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Answer 3

對我來說， Twitter Bootstrap 解決方案看起來不錯。 它不包括 IE < 9（在 IE 8 及更低版本中沒有圓角），但我認為，如果您開發預期的 Web 應用程序，那沒關系。

CSS/HTML：

 table { border: 1px solid #ddd; border-collapse: separate; border-left: 0; border-radius: 4px; border-spacing: 0px; } thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-collapse: separate; } tr { display: table-row; vertical-align: inherit; border-color: inherit; } th, td { padding: 5px 4px 6px 4px; text-align: left; vertical-align: top; border-left: 1px solid #ddd; } td { border-top: 1px solid #ddd; } thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { border-radius: 4px 0 0 0; } thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 4px; }

 <table> <thead> <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr> </thead> <tbody> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> </tbody> </table>

你可以在這里玩（在 jsFiddle 上）

Answer 4

首先，如果你想支持所有瀏覽器，你需要的不僅僅是-moz-border-radius 。 您應該指定所有變體，包括普通border-radius ，如下所示：

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

其次，要直接回答您的問題， border-radius實際上並不顯示邊框； 它只是設置邊界角的外觀（如果有的話）。

要打開邊框，從而獲得圓角，您還需要td和th元素上的border屬性。

td, th {
   border:solid black 1px;
}

如果您有背景顏色（或圖形），您還將看到圓角，當然它需要與周圍元素不同的背景顏色才能使圓角在沒有邊框的情況下可見。

值得注意的是，一些較舊的瀏覽器不喜歡在表格/表格單元格上放置border-radius 。 可能值得在每個單元格中放置一個<div>並設置樣式。 但是，這不應該影響任何瀏覽器的當前版本（除了 IE，它根本不支持圓角 - 見下文）

最后，並不是說 IE 根本不支持border-radius （IE9 beta 支持，但大多數 IE 用戶將使用 IE8 或更低版本）。 如果你想破解 IE 以支持邊框半徑，請查看http://css3pie.com/

[編輯]

好的，這讓我很煩，所以我做了一些測試。

這是我一直在玩的 JSFiddle 示例

似乎您缺少的關鍵是border-collapse:separate; 在表格元素上。 這會阻止單元格將它們的邊界鏈接在一起，從而使它們能夠拾取邊界半徑。

希望有幫助。

Answer 5

我為圓角和 IE<9 的其他 CSS3 行為找到的最佳解決方案可以在這里找到： http ://css3pie.com/

下載插件，復制到解決方案結構中的目錄。 然后在您的樣式表中確保有行為標記，以便它可以拉入插件。

我的項目中的簡單示例，它為我的桌子提供了圓角、顏色漸變和框陰影：

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

如果您的 Visual Studio CSS 智能感知為您提供未知屬性的綠色下划線，請不要擔心，它在您運行時仍然有效。 一些元素沒有很清楚地記錄，但例子非常好，尤其是在首頁上。

Answer 6

這有點粗糙，但這是我放在一起的東西，它完全由 CSS 和 HTML 組成。

• 外圓角
• 標題行
• 多個數據行

此示例還為每個數據單元<td>使用:hover偽類。 元素可以輕松更新以滿足您的需求，並且可以快速禁用懸停。

（但是，我還沒有讓:hover正確地為整行工作<tr> 。最后一個懸停的行沒有在底部顯示圓角。我敢肯定有一些簡單的東西被忽略了。）

 table.dltrc { width: 95%; border-collapse: separate; border-spacing: 0px; border: solid black 2px; border-radius: 8px; } tr.dlheader { text-align: center; font-weight: bold; border-left: solid black 1px; padding: 2px } td.dlheader { background: #d9d9d9; text-align: center; font-weight: bold; border-left: solid black 1px; border-radius: 0px; padding: 2px } tr.dlinfo, td.dlinfo { text-align: center; border-left: solid black 1px; border-top: solid black 1px; padding: 2px } td.dlinfo:first-child, td.dlheader:first-child { border-left: none; } td.dlheader:first-child { border-radius: 5px 0 0 0; } td.dlheader:last-child { border-radius: 0 5px 0 0; } /*===== hover effects =====*/ /*tr.hover01:hover, tr.hover02:hover { background-color: #dde6ee; }*/ /* === ROW HOVER === */ /*tr.hover02:hover:last-child { background-color: #dde6ee; border-radius: 0 0 6px 6px; }*/ /* === CELL HOVER === */ td.hover01:hover { background-color: #dde6ee; } td.hover02:hover { background-color: #dde6ee; } td.hover02:first-child { border-radius: 0 0 0 6px; } td.hover02:last-child { border-radius: 0 0 6px 0; }

 <body style="background:white"> <br> <center> <table class="dltrc" style="background:none"> <tbody> <tr class="dlheader"> <td class="dlheader">Subject</td> <td class="dlheader">Title</td> <td class="dlheader">Format</td> </tr> <tr class="dlinfo hover01"> <td class="dlinfo hover01">One</td> <td class="dlinfo hover01">Two</td> <td class="dlinfo hover01">Three</td> </tr> <tr class="dlinfo hover01"> <td class="dlinfo hover01">Four</td> <td class="dlinfo hover01">Five</td> <td class="dlinfo hover01">Six</td> </tr> <tr class="dlinfo hover01"> <td class="dlinfo hover01">Seven</td> <td class="dlinfo hover01">Eight</td> <td class="dlinfo hover01">Nine</td> </tr> <tr class="dlinfo2 hover02"> <td class="dlinfo hover02">Ten</td> <td class="dlinfo hover01">Eleven</td> <td class="dlinfo hover02">Twelve</td> </tr> </tbody> </table> </center> </body>

Answer 7

通過個人經驗，我發現不可能使用純 CSS 對 HTML 表格單元格的角進行圓角處理。 可以將表格的最外邊界四舍五入。

您將不得不使用本教程中所述的圖像或任何類似的方法:)

Answer 8

為了適應@luke floornoy 的精彩回答——如果你沒有在你的表格中使用th ，這里是制作圓桌所需的所有 CSS：

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Answer 9

2020+解決方案

1. 使用 CSS 變量將表格的邊框半徑傳遞給角單元格的邊框半徑，這樣您就可以在單個位置更改半徑（如<table class="rounded" style="--radius: 10px"> ）
2. border-collapse刪除邊框半徑設置，沒有它邊框寬度加倍。 為了使邊框寬 1px，我建議使用單元格的框陰影（如box-shadow: -1px -1px black ）；

 /* rounded corners */ .rounded { --radius: 5px; --border-color: black; border: 1px solid var(--border-color); border-radius: var(--radius); border-spacing: 0; } .rounded tr:first-child>:first-child { border-top-left-radius: var(--radius); } .rounded tr:first-child>:last-child { border-top-right-radius: var(--radius); } .rounded tr:last-child>:first-child { border-bottom-left-radius: var(--radius); } .rounded tr:last-child>:last-child { border-bottom-right-radius: var(--radius); } /* design */ .rounded th, .rounded td { padding: .2rem; /* border: 1px solid var(--border-color); */ box-shadow: -1px -1px var(--border-color); } .rounded th { background: hsl(240deg, 100%, 80%); }

 <table class="rounded"> <tr> <th>Name <th>Note <tr> <td>Bill Gates <td>Plagiator <tr> <td>Steve Jobs <td>Hipster </table>

@jt3k 在評論中建議半像素邊框，這是一個有趣但有風險的想法：w3 規范允許以像素為單位的實數，但它們沒有描述瀏覽器應該如何呈現它們，並且一些用戶報告了這個問題。

Answer 10

對於有邊框和可滾動的表格，使用這個（替換變量， $起始文本）

如果您使用thead 、 tfoot或th ，只需用它們替換tr:first-child和tr-last-child和td 。

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML：

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Answer 11

示例 HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS，輕松轉換為 CSS，使用 sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Answer 12

在表格周圍添加<div>包裝器，並應用以下 CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

到這個包裝器。

Answer 13

替代解決方案是使用表的包裝器

http://jsfiddle.net/0fmweahc/15/

<div class="table-wrapper">
 <table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
 </table>
</div>

<style>
  .table-wrapper {
    border: 1px solid black;
    border-radius: 20px;
    margin: 10%;
  }

  table, td, th {
    border: 1px solid black;
    padding: 10px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
  }
</style>

Answer 14

以下是我使用的跨瀏覽器對我有用的東西，所以我希望它對將來的人有所幫助：

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

顯然，# #contentblock部分可以根據需要進行替換/編輯，您可以通過在 Google 或您喜歡的網絡瀏覽器中進行搜索來找到border-radius.htc文件。

Answer 15

如果你想要桌子兩邊的圓角而不接觸單元格，你可以試試這個：http: //jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

Answer 16

在<head>標簽之間添加：

<style>
  td {background: #ffddaa; width: 20%;}
</style>

在體內：

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

單元格顏色、內容和格式當然是例如；
這是關於在 div 中間隔填充顏色的單元格。 這樣做，黑色單元格邊框/表格邊框實際上是 div 背景顏色。
請注意，您需要將 div-border-radius 設置為比單獨的單元格角邊框半徑大 2 個值，以獲得平滑的圓角效果。

Answer 17

這是css3 ，只有最近的非 IE<9 瀏覽器會支持它。

在這里查看，它為所有可用的瀏覽器派生了 round 屬性

Answer 18

由於沒有一個更高級別的解決方案對我有用，因為我正在使用具有交替配色方案的桌子，我嘗試了很多，最后根據@[luke floornoy] 提供的解決方案得到了我的解決方案。

基本上，在表格上放置圓形邊框的解決方案有效 - 但是當您在表格行上應用背景顏色或使用指定的表格頭時，它會覆蓋整個表格設置並顯示為矩形。

Luke 的解決方案只針對特定的角落單元格，這讓我想到了我應該也將交替背景顏色應用於該行的單元格而不是該行本身。 將 td 添加到 tr:nth-child 就可以了。 如果您想在表頭上使用第三種顏色，也是如此。 您可以在下面的代碼片段中查看這一點。

我沒有看到任何其他實際使用背景顏色的解決方案，尤其是在一張桌子上沒有使用不同顏色的解決方案，所以我希望這個解決方案可以幫助那些需要不僅僅是一張普通的單色桌子的人。 如果它對您有幫助，請給它評分，所以它會移到頂部。 這里有很多非常挑剔且不太有用的答案，所以。

這是我的結果https://i.stack.imgur.com/XHOEN.png

這是它的代碼：

 .LezzonPrize{ text-align: center; line-height: 1.8rem; border-collapse: collapse; border-radius: 36px; -moz-border-radius: 36px; -webkit-border-radius: 36px; background-color: #FCF3C6; } .LezzonPrize thead th{ background-color:#FFCF5A; } .LezzonPrize thead th:first-child{ border-radius: 36px 0 0 0; } .LezzonPrize thead th:last-child{ border-radius: 0 36px 0 0; } .LezzonPrize th{ text-align: center; vertical-align: middle; line-height: 1.8rem; font-weight: 700; text-transform: none; border-bottom: 2px solid #3F5A1B; } .LezzonPrize td:first-child{ text-align:left; } .LezzonPrize td{ font-size:18px; } .LezzonPrize tr:nth-child(2n-1) td{ background-color: #F3CF87; } .LezzonPrize tr:last-child td:first-child{ border-radius: 0 0 0 36px; -moz-border-radius: 0 0 0 36px; -webkit-border-radius: 0 0 0 36px; } .LezzonPrize tr:last-child td:last-child{ border-radius: 0 0 36px 0; -moz-border-radius: 0 0 36px 0; -webkit-border-radius: 0 0 36px 0; }

 <table class="LezzonPrize" width="100%"> <thead> <tr> <th width="32%"> Head </th> <th width="17%"> Head </th> <th width="17%"> Head </th> <th width="17%"> Head </th> <th width="17%"> Head </th> </tr> </thead> <tbody> <tr> <td> Content </td> <td> Content </td> <td> Content </td> <td> Content </td> <td> Content </td> </tr> <tr> <td> Content </td> <td> Content </td> <td> Content </td> <td> Content </td> <td> Content </td> </tr> <tr> <td> Content </td> <td> Content </td> <td> Content </td> <td> Content </td> <td> Content </td> </tr> <tr> <td colspan="5">Try deleting this to confirm that the round corners also work on the 2nth-child table rows</td> </tr> </tbody> </table>

Answer 19

CSS：

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}

Answer 20

表格邊框課程...

注意：下面的 HTML/CSS 代碼只能在 IE 中查看。 代碼將無法在 Chrome 中正確呈現！

我們需要記住：

1. 表格有一個邊框：它的外邊界（也可以有一個邊框半徑。）

2. 單元格本身也有邊界（也可以有邊界半徑。）

3. 表格和單元格邊框可能會相互干擾：

   單元格邊框可以穿透表格邊框（即：表格邊界）。

   為了看到這個效果，修改下面代碼中的 CSS 樣式規則如下：
   一世。 表{border-collapse：分開；}
   ii. 刪除表格角落單元格的樣式規則。
   iii. 然后玩邊框間距，這樣你就可以看到干擾。

4. 但是，表格邊框和單元格邊框可以折疊（使用：border-collapse:collapse;）。

5. 當它們被折疊時，單元格和表格邊框以不同的方式干擾：

   一世。 如果表格邊框是圓形的，但單元格邊框保持方形，則單元格的形狀優先，表格將失去其弧形角。

   ii. 相反，如果角單元是彎曲的但表格邊界是方形的，那么您將看到一個丑陋的方形角與角單元的曲率接壤。

6. 鑒於單元格的屬性優先，那么圓桌四個角的方法是：

   一世。 折疊表格上的邊框（使用：border-collapse:collapse;）。

   ii. 在表格的角單元上設置所需的曲率。
   iii. 桌子的角是否圓角並不重要（即：它的邊框半徑可以為零）。

 .zui-table-rounded { border: 2px solid blue; /*border-radius: 20px;*/ border-collapse: collapse; border-spacing: 0px; } .zui-table-rounded thead th:first-child { border-radius: 30px 0 0 0; } .zui-table-rounded thead th:last-child { border-radius: 0 10px 0 0; } .zui-table-rounded tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .zui-table-rounded tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } .zui-table-rounded thead th { background-color: #CFAD70; } .zui-table-rounded tbody td { border-top: solid 1px #957030; background-color: #EED592; }

 <table class="zui-table-rounded"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Height</th> <th>Born</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>DeMarcus Cousins</td> <td>C</td> <td>6'11"</td> <td>08-13-1990</td> <td>$4,917,000</td> </tr> <tr> <td>Isaiah Thomas</td> <td>PG</td> <td>5'9"</td> <td>02-07-1989</td> <td>$473,604</td> </tr> <tr> <td>Ben McLemore</td> <td>SG</td> <td>6'5"</td> <td>02-11-1993</td> <td>$2,895,960</td> </tr> <tr> <td>Marcus Thornton</td> <td>SG</td> <td>6'4"</td> <td>05-05-1987</td> <td>$7,000,000</td> </tr> <tr> <td>Jason Thompson</td> <td>PF</td> <td>6'11"</td> <td>06-21-1986</td> <td>$3,001,000</td> </tr> </tbody> </table>