CSS－製作圓角邊框表格

.editor-table {
  width: 700px ;
  font-size: 1rem;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  margin: 10px 0;
  color: #393939;
  /*必須有border-collapse: separate，圓角才會出現*/
  border-collapse: separate;
  /*表格間距設0*/
  border-spacing: 0;
  border-top: 1px solid #DCDCDC;
  border-right: 1px solid #DCDCDC;
  border-radius: 8px;
}

.editor-table tr {
  border: none;
}
.editor-table td {
  vertical-align: middle;
  border: 1px solid #DCDCDC;
   /*表格框線設置，避免出現框線重覆的樣式*/
  border-top: none;
  border-right: none;
  background: #F5FBFE;
  padding: 10px 12px;
  line-height: 1.5;
}
 /*第一欄第一列：左上*/
.editor-table tr:first-child td:first-child {
  border-top-left-radius: 8px;
}
/*第一欄最後列：左下*/
.editor-table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
 /*最後欄第一列：右上*/
.editor-table tr:first-child td:last-child {
  border-top-right-radius: 8px;
}
 /*最後欄第一列：右下*/
.editor-table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

完成樣式效果：

參考網頁：

[筆記] 針對表格使用邊框圓角(table with border-radius)
https://pjchender.blogspot.com/2015/12/table-with-border-radius.html