border-radius 屬性和 border-collapse:collapse 不能混用。 如何使用 border-radius 創建圓角折疊表格？

Question

我正在嘗試使用 CSS border-radius屬性制作一個圓角表格。 我使用的表格樣式看起來像這樣：

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

這就是問題所在。 我還想設置border-collapse:collapse屬性，設置后border-radius不再有效。 有沒有一種基於 CSS 的方法可以在不實際使用的情況下獲得與border-collapse:collapse相同的效果？

好像很大一部分問題是設置table有圓角不影響corner td元素的角。 如果表格都是一種顏色，這將不是問題，因為我可以分別為第一行和最后一行制作圓角的頂部和底部td角。 但是，我為表格使用不同的背景顏色來區分標題和條紋，因此內部td元素也會顯示它們的圓角。

用另一個帶圓角的元素包圍桌子是行不通的，因為桌子的方角會“滲透”。

將邊框寬度指定為 0 不會折疊表格。

將 cellspacing 設置為零后，底部td角仍然是正方形。

這些表是用 PHP 生成的，因此我可以將不同的類應用於每個外部 th/tds 並分別設置每個角的樣式。 我寧願不這樣做，因為它不是很優雅，而且應用於多個表有點痛苦，所以請繼續提出建議。

我想在沒有 JavaScript 的情況下執行此操作。

Answer 1

我想到了。 你只需要使用一些特殊的選擇器。

圓角表的問題是 td 元素也沒有變成圓角。 您可以通過執行以下操作來解決此問題：

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

現在一切正常，除了仍然存在border-collapse: collapse破壞一切。

一種解決方法是添加border-spacing: 0並在表格上保留默認的border-collapse: separate 。

Answer 2

以下方法工作（在 Chrome 中測試）通過使用具有1px擴展的box-shadow而不是“真實”邊框。

 table { border-collapse: collapse; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; }

 <table> <thead> <tr> <th>Foo</th> <th>Bar</th> </tr> </thead> <tbody> <tr> <td>Baz</td> <td>Qux</td> </tr> <tr> <td>Life is short</td> <td rowspan="3">and</td> </tr> <tr> <td>Love</td> </tr> <tr> <td>is always over</td> </tr> <tr> <td>In the</td> <td>Morning</td> </tr> </tbody> </table>

Answer 3

如果您想要一個允許 1px 邊框的純 CSS 解決方案（無需在 HTML 中設置cellspacing=0 ）（您不能使用border-spacing: 0解決方案），我更喜歡執行以下操作：

• 為表格單元格（ td和th ）設置border-right和border-bottom
• 為第一行中的單元格設置border-top
• 給第一列中的單元格一個border-left
• 使用first-child和last-child選擇器，為四個角中的表格單元格圓角。

在此處查看演示。

給定以下 HTML：

請參見下面的示例：

 .custom-table{margin:30px;} table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr th:last-child{ border-top:solid 1px #bbb;} table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background: #eee; text-align: left; } table.Info tr th, table.Info tr:first-child td { border-top: 1px solid #bbb; } /* top-left border-radius */ table tr:first-child th:first-child, table.Info tr:first-child td:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child, table.Info tr:first-child td:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; }

 <div class="custom-table"> <table> <tr> <th>item1</th> <th>item2</th> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> </table> </div>

Answer 4

您是否嘗試過使用table{border-spacing: 0}而不是table{border-collapse: collapse} ？？？

Answer 5

您可能必須在表格周圍放置另一個元素並使用圓形邊框對其進行樣式設置。

工作草案規定當border-collapse的值為collapse時， border-radius不適用於表格元素。

Answer 6

正如伊恩所說，解決方案是將表格嵌套在一個 div 中並像這樣設置它：

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

使用overflow:hidden ，方角不會流過 div。

Answer 7

據我所知，您可以這樣做的唯一方法是像這樣修改所有單元格：

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

然后得到底部和右后的邊框

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child在 ie6 中無效，但如果您使用border-radius ，我假設您不在乎。

編輯：

查看您的示例頁面后，您似乎可以使用單元格間距和填充來解決此問題。

您看到的粗灰色邊框實際上是表格的背景（如果將邊框顏色更改為紅色，您可以清楚地看到這一點）。 如果將單元格間距設置為零（或等效地： td, th { margin:0; } ），灰色的“邊框”將消失。

編輯2：

我找不到只用一張桌子就能做到這一點的方法。 如果您將 header 行更改為嵌套表，您可能可以獲得您想要的效果，但它需要更多的工作，而不是動態的。

Answer 8

我嘗試了在thead th:first-child和thead th:last-child上使用偽元素:before和:after的解決方法

結合使用<div class="radius borderCCC">包裹表格

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

見jsFiddle

在 chrome (13.0.782.215) 中適用於我，讓我知道這是否適用於其他瀏覽器。

Answer 9

實際上，您可以將table添加到div作為其包裝器。 然后將這些CSS代碼分配給包裝器：

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Answer 10

給定的答案僅在桌子周圍沒有邊框時才有效，這是非常有限的！

我在 SASS 中有一個宏來執行此操作，它完全支持外部和內部邊框，實現與邊框折疊相同的樣式：折疊而不實際指定它。

在 FF/IE8/Safari/Chrome 中測試。

在除 IE8 之外的所有瀏覽器中，在純 CSS 中提供漂亮的圓形邊框（優雅地降級），因為 IE8 不支持邊框半徑：（

一些較舊的瀏覽器可能需要供應商前綴才能與border-radius一起使用，因此請隨時根據需要將這些前綴添加到您的代碼中。

這個答案不是最短的 - 但它有效。

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

要應用此樣式，只需更改您的

<table>

標記到以下內容：

<table class="roundedTable">

並確保在您的 HTML 中包含上述 CSS styles。

希望這可以幫助。

Answer 11

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

如果您使用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 12

我剛剛為此寫了一組瘋狂的 CSS ，似乎效果很好：

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Answer 13

我有同樣的問題。 完全刪除border-collapse並在 html 文檔中使用： cellspacing="0" cellpadding="0" 。 例子：

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Answer 14

這是一種方法：

 div {... overflow: hidden; border-radius: 14px; transform: rotate(0deg); } table { border-spacing: 0; }

 <div> <table></table> </div>

或者

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Answer 15

帶有邊框折疊的解決方案：表格和顯示分開：tbody 和thead 的內聯表格。

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Answer 16

我是 HTML 和 CSS 的新手，我也在尋找解決方案，在這里我找到了。

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

我試了一下，猜猜它的工作原理:)

Answer 17

在遇到同樣的問題后找到了這個答案，但發現它很簡單：只需給表溢出：隱藏

不需要包裝元素。 當然，我不知道這在 7 年前最初提出問題時是否可行，但現在可行。

Answer 18

帶有圓角和帶邊框的單元格的表格。 使用@Ramon Tayag解決方案。

他指出，關鍵是使用border-spacing: 0 。

使用SCSS的解決方案。

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Answer 19

我開始使用“顯示”進行實驗，我發現： border-radius 、 border 、 margin 、 padding ，在table中顯示為：

display: inline-table;

例如

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

但是我們需要設置每列的width

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Answer 20

最簡單的方法...

table {
 border-collapse: inherit;
 border: 1px solid black;
 border-radius: 5px;
}

Answer 21

這是一個最近的例子，展示了如何從http://medialoot.com/preview/css-ui-kit/demo.html實現一個帶有圓角的表格。 它基於上面 Joel Potter 建議的特殊選擇器。 如您所見，它還包含一些讓 IE 開心一點的魔法。 它包括一些額外的 styles 來交替行的顏色：

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

Answer 22

我總是使用 Sass 這樣做

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Answer 23

迄今為止最好的解決方案來自您自己的解決方案，它是這樣的：

 table, tr, td, th{ border: 1px solid; text-align: center; } table{ border-spacing: 0; width: 100%; display: table; } table tr:last-child td:first-child, tr:last-child, table { border-bottom-left-radius: 25px; } table tr:last-child td:last-child, tr:last-child, table { border-bottom-right-radius: 25px; } table tr:first-child th:first-child, tr:first-child, table { border-top-left-radius: 25px; } table tr:first-child th:last-child, tr:first-child, table { border-top-right-radius: 25px; }

 <table> <tr> <th>Num</th><th>Lett</th><th>Lat</th> </tr> <tr> <td>1</td><td>A</td><td>I</td> </tr> <tr> <td>2</td><td>B</td><td>II</td> </tr> <tr> <td>3</td><td>C</td><td>III</td> </tr> </table>

Answer 24

 table { width: 200px; text-align: center; border-radius: 12px; overflow: hidden; } table td { border-width: 1px 0 0 1px; } table tr:first-child td { border-top: none; } table tr td:first-child { border-left: none; } div { background-color: lime; }

 <table cellspacing="0" cellpadding="0" border="1"> <tr> <td><div>1</div></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </table>

Answer 25

其他一些答案很好，但沒有人認為您使用了thead 、 tbody和tfoot 。 或者情況，當你可以將它們組合起來時。 當你應用它們時，你會得到一些不必要的舍入或邊框。 因此，我嘗試從 @NullUserException 調整僅 css 的答案，這就是我得到的：

table {
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: darkgreen;
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
}
table tr td,
table tr th {
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: darkgreen;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: darkgreen;
}
table tr th:last-child,
table tr td:last-child {
    border-right-width: 2px;
    border-right-style: none;
    border-right-color: darkgreen;
}
table tr:last-child td,
table tr:last-child th {
    border-bottom-width: 2px;
    border-bottom-style: none;
    border-bottom-color: darkgreen;
}
/* top-left border-radius */
table :not(tfoot) tr:first-child th:first-child,
table :not(tfoot) tr:first-child td:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0;
}

/* top-right border-radius */
table :not(tfoot) tr:first-child th:last-child,
table :not(tfoot) tr:first-child td:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
}

/* bottom-left border-radius */
table :not(thead) tr:last-child th:first-child,
table :not(thead) tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

/* bottom-right border-radius */
table :not(thead) tr:last-child th:last-child,
table :not(thead) tr:last-child td:last-child{
    border-bottom-right-radius: 5px;
}

/*Handle thead and tfoot borders*/
table thead tr:first-child th,
table thead tr:first-child td {
  border-top-style: none;
}
table thead tr:last-child th,
table thead tr:last-child td {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: darkgreen;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
  border-bottom-style: none;
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: darkgreen;
}
table tr:first-child th,
table tr:first-child td {
  border-top-style: none;
}

darkgreen用於清楚地表明整個表格的任何地方的邊界都是正確的。 本質上，無論您在哪里看到darkgreen - 就是您設置表格邊框的位置。
這個codepen顯示了常規表格和帶有thead 、 tbody和tfoot的表格。 CSS 與上面的相同，只是為th添加了樣式重置。 在撰寫本文時，您可以看到它們的渲染相同。

Answer 26

使用“溢出：隱藏”和“邊界半徑”這也適用於“折疊”表

例子：

邊界半徑：1em； 溢出：隱藏；

Answer 27

我看到了很多奇怪的技巧和解決方法，所以我想建議我的解決方案來創建一個帶有border-radius和與邊框相同的視覺效果的表格border: collapse; 通過簡單地定位嵌套的行和單元格來關閉邊框。

您可以使用其他偽選擇器（如 first-child 等）更深入地滿足您的需求，但這是最小的解決方案：

 table { width: 100%; border-spacing: 0; border-radius: 4px; border: 1px solid #ccc; } th, td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; }

 <table> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </tbody> </table>

Answer 28

現在正式支持邊界半徑。 因此，在上述所有示例中，您都可以刪除“-moz-”前綴。

另一個技巧是使用與邊框相同的顏色作為頂行和底行。 與所有 3 個 colors 相同，它融合在一起，看起來像一個完美的圓桌，即使它不是物理的。