คุณสมบัติรัศมีของ CSS3 และการยุบขอบ: การยุบไม่ผสมกัน ฉันจะใช้รัศมีเส้นขอบเพื่อสร้างตารางที่ยุบด้วยมุมที่ถูกปัดเศษได้อย่างไร

แก้ไข - ชื่อเรื่อง:มีทางเลือกในการประสบความสำเร็จborder-collapse:collapseในCSS(ในการสั่งซื้อที่จะมีการยุบตารางมุมโค้งมน)?

เนื่องจากปรากฎว่าการทำให้เส้นขอบของตารางยุบลงไม่สามารถแก้ปัญหารากได้ฉันจึงอัปเดตชื่อเพื่อให้สะท้อนการอภิปรายได้ดียิ่งขึ้น

ฉันกำลังพยายามทำตารางที่มีมุมโค้งมนโดยใช้CSS3 border-radiusคุณสมบัติ รูปแบบตารางที่ฉันใช้มีลักษณะดังนี้:

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

นี่คือปัญหา ฉันต้องการตั้งค่าborder-collapse:collapseคุณสมบัติและเมื่อชุดนั้นborder-radiusไม่ทำงานอีกต่อไป มีวิธีตาม CSS ที่ฉันสามารถรับผลเช่นเดียวกับที่border-collapse:collapseไม่ใช้จริงหรือไม่

การแก้ไข:

ฉันได้ทำหน้าง่าย ๆ เพื่อแสดงปัญหาที่นี่ (Firefox / Safari เท่านั้น)

ดูเหมือนว่าปัญหาส่วนใหญ่คือการตั้งค่าตารางให้มีมุมมนไม่ส่งผลต่อมุมของtdองค์ประกอบมุม ถ้าตารางมีสีเดียวทั้งหมดนี่คงไม่ใช่ปัญหาเพราะฉันสามารถสร้างยอดและล่างtdกลมสำหรับแถวแรกและแถวสุดท้ายตามลำดับ อย่างไรก็ตามฉันใช้สีพื้นหลังที่แตกต่างกันสำหรับตารางเพื่อแยกความแตกต่างของส่วนหัวและสำหรับการสตริปดังนั้นtdองค์ประกอบภายในจะแสดงมุมโค้งมนของพวกเขาเช่นกัน

สรุปโซลูชั่นที่นำเสนอ:

การล้อมรอบโต๊ะด้วยองค์ประกอบอื่นที่มีมุมโค้งมนไม่ได้ผลเพราะมุมสี่เหลี่ยมของตาราง "มีเลือดออก"

การระบุความกว้างของเส้นขอบเป็น 0 จะไม่ยุบตาราง

tdมุมด้านล่างยังคงเป็นสี่เหลี่ยมจัตุรัสหลังจากกำหนดระยะห่างระหว่างเซลล์เป็นศูนย์

การใช้จาวาสคริปต์แทนทำได้โดยหลีกเลี่ยงปัญหา

การแก้ปัญหาที่เป็นไปได้:

ตารางถูกสร้างขึ้นใน PHP ดังนั้นฉันสามารถใช้คลาสที่แตกต่างกับแต่ละด้านนอก / tds และสไตล์แต่ละมุมแยกจากกัน ฉันไม่อยากทำสิ่งนี้เนื่องจากมันไม่ได้สวยงามมากและมีความเจ็บปวดเล็กน้อยที่จะนำไปใช้กับหลาย ๆ ตารางดังนั้นโปรดให้คำแนะนำต่อไป

วิธีแก้ปัญหาที่เป็นไปได้ 2 คือใช้ JavaScript (jQuery โดยเฉพาะ) เพื่อจัดมุม วิธีนี้ยังใช้งานได้ แต่ก็ยังไม่ค่อยมีสิ่งที่ฉันกำลังมองหา (ฉันรู้ว่าฉันจู้จี้จุกจิก) ฉันมีการจองสองครั้ง:

1. นี่เป็นเว็บไซต์ที่มีน้ำหนักเบามากและฉันต้องการให้ JavaScript อยู่ในระดับต่ำสุด
2. ส่วนหนึ่งของการอุทธรณ์ว่าการใช้รัศมีเส้นขอบนั้นสำหรับฉันคือความเสื่อมโทรมที่สง่างามและการปรับปรุงอย่างต่อเนื่อง ด้วยการใช้เส้นขอบรัศมีสำหรับมุมที่โค้งมนทั้งหมดฉันหวังว่าจะมีไซต์ที่โค้งมนอย่างต่อเนื่องในเบราว์เซอร์ที่สามารถใช้ CSS3 และไซต์สแควร์ที่สม่ำเสมอในที่อื่น ๆ (ฉันกำลังมองคุณ IE)

ฉันรู้ว่าการพยายามทำสิ่งนี้กับ CSS3 ในวันนี้อาจดูเหมือนไม่จำเป็น แต่ฉันมีเหตุผลของฉัน ฉันอยากจะชี้ให้เห็นว่าปัญหานี้เป็นผลมาจากข้อกำหนด w3c ไม่ใช่การสนับสนุน CSS3 ที่ไม่ดีดังนั้นการแก้ปัญหาใด ๆ จะยังคงเกี่ยวข้องและมีประโยชน์เมื่อ CSS3 มีการสนับสนุนที่แพร่หลายมากขึ้น

ฉันคิดออก คุณต้องใช้ตัวเลือกพิเศษบางอย่าง

ปัญหาเกี่ยวกับการปัดเศษมุมของตารางคือองค์ประกอบ 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ไว้ในตาราง

วิธีการต่อไปนี้ใช้งานได้ (ทดสอบใน Chrome) โดยใช้ a box-shadowพร้อมส่วนขยาย1pxแทนที่จะเป็นขอบ "ของจริง"

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;
}

หากคุณต้องการโซลูชัน CSS-only (ไม่จำเป็นต้องตั้งค่าcellspacing=0ใน HTML) ที่อนุญาตให้ใช้ 1px border (ซึ่งคุณไม่สามารถทำได้กับborder-spacing: 0โซลูชัน) ฉันต้องการทำสิ่งต่อไปนี้:

• ตั้งค่าborder-rightและborder-bottomสำหรับเซลล์ตารางของคุณ ( tdและth)
• ให้เซลล์ในแถวแรก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>

คุณเคยลองใช้table{border-spacing: 0}แทนtable{border-collapse: collapse}???

คุณอาจจะต้องใส่องค์ประกอบอื่นรอบโต๊ะและสไตล์ที่มีขอบโค้งมน

ทำงานร่างระบุว่าborder-radiusใช้ไม่ได้กับองค์ประกอบของตารางเมื่อค่าของการมีborder-collapsecollapse

ดังที่ Ian กล่าววิธีแก้ปัญหาคือการซ้อนตารางภายใน div และตั้งค่าดังนี้:

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

ด้วยoverflow:hiddenมุมสี่เหลี่ยมจะไม่ทำให้เลือดไหลผ่านกอง

เท่าที่ผมทราบดีที่สุดวิธีเดียวที่คุณสามารถทำได้คือปรับเปลี่ยนเซลล์ทั้งหมดเช่น:

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:

ฉันไม่สามารถหาวิธีทำสิ่งนี้ได้ด้วยตารางเดียว หากคุณเปลี่ยนแถวส่วนหัวของคุณเป็นตารางแบบซ้อนคุณอาจสามารถรับเอฟเฟกต์ที่คุณต้องการได้ แต่มันจะทำงานได้มากกว่าและไม่ใช่แบบไดนามิก

ฉันลองวิธีแก้ปัญหาโดยใช้องค์ประกอบเทียม:beforeและ:afterบนthead th:first-childและthead th:last-child

ใช้ร่วมกับการพันโต๊ะด้วย <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) ให้ฉันรู้ว่าสิ่งนี้ใช้ได้กับคุณในเบราว์เซอร์อื่นหรือไม่

ที่จริงคุณสามารถเพิ่มของคุณtableภายในdivเป็นเสื้อคลุมของมัน แล้วกำหนดCSSรหัสเหล่านี้ให้กับ wrapper:

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

table {
  border-collapse: collapse;
}

คำตอบที่ได้รับจะใช้ได้เฉพาะเมื่อไม่มีเส้นขอบรอบโต๊ะซึ่ง จำกัด มาก!

ฉันมีมาโครใน SASS ที่จะทำสิ่งนี้ซึ่งรองรับเส้นขอบทั้งภายนอกและภายในอย่างเต็มที่บรรลุการจัดแต่งทรงผมเช่นเดียวกับการยุบตัวของเส้นขอบ: ยุบโดยไม่ระบุจริง

ทดสอบใน FF / IE8 / Safari / Chrome

ให้เส้นขอบโค้งมนที่ดีใน CSS บริสุทธิ์ในทุกเบราว์เซอร์ แต่ IE8 (ลดระดับลงอย่างสวยงาม) เนื่องจาก 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">

และต้องแน่ใจว่าได้รวมสไตล์ CSS ข้างต้นไว้ใน HTML ของคุณแล้ว

หวังว่านี่จะช่วยได้

สำหรับตารางที่มีขอบและเลื่อนได้ให้ใช้สิ่งนี้ (แทนที่ตัวแปร, $ข้อความเริ่มต้น)

ถ้าคุณใช้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>

ผมมีปัญหาเหมือนกัน. ลบborder-collapseทั้งหมดและใช้: cellspacing="0" cellpadding="0" ในเอกสาร html ตัวอย่าง:

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

ฉันเพิ่งเขียนชุด 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 !*/

วิธีแก้ปัญหาการยุบตัวของเส้นขอบ: แยกต่างหากสำหรับตารางและแสดง: อินไลน์ตารางสำหรับ 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;        
}

ฉันใหม่ด้วย 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
}

ฉันลองเดาว่ามันใช้งานได้ดี :)

พบคำตอบนี้หลังจากพบปัญหาเดียวกัน แต่พบว่าง่ายมากเพียงให้ตารางล้น: ซ่อน

ไม่จำเป็นต้องมีองค์ประกอบห่อ จริงอยู่ที่ฉันไม่รู้ว่าสิ่งนี้จะใช้ได้ 7 ปีที่แล้วหรือไม่เมื่อคำถามถูกถามในตอนแรก แต่มันใช้ได้ในขณะนี้

ตารางที่มีมุมโค้งมนและเซลล์ที่มีขอบ ใช้@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;
  }
}

ฉันเริ่มต้นการทดสอบด้วยการแสดง "" และผมพบว่า: 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;
}

นี่คือตัวอย่างล่าสุดของวิธีการที่จะใช้ตารางที่มีโค้งมน-มุมจากhttp://medialoot.com/preview/css-ui-kit/demo.html มันขึ้นอยู่กับตัวเลือกพิเศษที่โจเอลพอตเตอร์แนะนำไว้ข้างต้น อย่างที่คุณเห็นมันยังมีเวทย์มนตร์ที่จะทำให้ IE มีความสุขเล็กน้อย มันมีรูปแบบพิเศษบางอย่างเพื่อสลับสีของแถว:

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;
}

นี่คือวิธี:

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;
    }

ฉันทำแบบนี้กับ 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;
    }
  }
}

ทางออกที่ดีที่สุดมาจากโซลูชันของคุณเองและมันจะเป็นดังนี้:

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>

สนับสนุนรัศมีชายแดนอย่างเป็นทางการแล้ว ดังนั้นในตัวอย่างข้างต้นทั้งหมดคุณสามารถวางคำนำหน้า "-moz-"

เคล็ดลับก็คือการใช้สีเดียวกันสำหรับแถวบนและล่างเช่นเดียวกับชายแดนของคุณ ด้วย 3 สีเดียวกันมันจึงกลมกลืนและดูเหมือนกับโต๊ะที่โค้งมนอย่างสมบูรณ์แบบ