CSS มุมตารางมนเท่านั้น

ฉันได้ค้นหาและค้นหา แต่ไม่พบวิธีแก้ปัญหาสำหรับความต้องการของฉัน

ฉันมีตาราง 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
}

แต่นั่นทำให้ฉันไม่มีขอบเขตสำหรับเซลล์ ถ้าฉันเพิ่มเส้นขอบมันจะไม่ถูกปัด!

วิธีแก้ปัญหาใด ๆ

ดูเหมือนว่าจะทำงานได้ดีใน FF และ Chrome (ยังไม่ได้ทดสอบอื่น ๆ ) โดยมีเส้นขอบแยกกัน: http://jsfiddle.net/7veZQ/3/

แก้ไข: นี่คือการใช้งานร่างของคุณที่ค่อนข้างสะอาด:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-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/

สำหรับฉันTwitter Bootstrap Solutionดูดี ไม่รวม IE <9 (ไม่มีมุมกลมใน IE 8 และต่ำกว่า) แต่ก็โอเคฉันคิดว่าถ้าคุณพัฒนา Web-Apps ที่คาดหวัง

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)

ประการแรกคุณจะต้องมีมากกว่านั้น-moz-border-radiusหากคุณต้องการรองรับเบราว์เซอร์ทั้งหมด คุณควรระบุรูปแบบทั้งหมดรวมทั้งแบบธรรมดาborder-radiusดังนี้:

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

ประการที่สองเพื่อตอบคำถามของคุณโดยตรงborder-radiusไม่ได้แสดงเส้นขอบ เพียงแค่กำหนดลักษณะของมุมของเส้นขอบหากมี

ในการเปิดเส้นขอบและทำให้ได้มุมโค้งมนของคุณคุณต้องมีborderแอตทริบิวต์ของคุณtdและthองค์ประกอบด้วย

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

นอกจากนี้คุณจะเห็นมุมโค้งมนหากคุณมีสีพื้นหลัง (หรือกราฟิก) แม้ว่าแน่นอนว่าจะต้องเป็นสีพื้นหลังที่แตกต่างจากองค์ประกอบโดยรอบเพื่อให้สามารถมองเห็นมุมโค้งมนได้โดยไม่มีเส้นขอบ

เป็นที่น่าสังเกตว่าเบราว์เซอร์รุ่นเก่าบางตัวไม่ชอบวางborder-radiusบนตาราง / เซลล์ตาราง อาจคุ้มค่าที่จะใส่<div>เข้าไปในแต่ละเซลล์แล้วจัดแต่งทรงผมแทน อย่างไรก็ตามสิ่งนี้ไม่ควรส่งผลกระทบต่อเบราว์เซอร์เวอร์ชันปัจจุบันใด ๆ (ยกเว้น IE ที่ไม่รองรับมุมโค้งมนเลย - ดูด้านล่าง)

สุดท้ายไม่ใช่ว่า IE ไม่รองรับborder-radiusเลย (IE9 beta แต่ผู้ใช้ IE ส่วนใหญ่จะใช้ IE8 หรือน้อยกว่า) หากคุณต้องการแฮ็ค IE เพื่อรองรับ border-radius ดูที่http://css3pie.com/

[แก้ไข]

โอเคนี่เป็นการรบกวนฉันดังนั้นฉันจึงทำการทดสอบ

นี่คือตัวอย่าง JSFiddle ที่ฉันเล่นด้วย

ดูเหมือนว่าสิ่งสำคัญที่คุณขาดหายไปคือborder-collapse:separate;องค์ประกอบของตาราง สิ่งนี้จะหยุดเซลล์ไม่ให้เชื่อมโยงพรมแดนเข้าด้วยกันซึ่งทำให้เซลล์รับรัศมีขอบได้

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

คำตอบที่เลือกนั้นแย่มาก ฉันจะใช้สิ่งนี้โดยกำหนดเป้าหมายเซลล์ตารางมุมและใช้รัศมีขอบที่เกี่ยวข้อง

เพื่อให้ได้มุมบนสุดให้ตั้งค่ารัศมีเส้นขอบบนประเภทแรกและสุดท้ายขององค์ประกอบthจากนั้นจบด้วยการตั้งค่ารัศมีเส้นขอบบนประเภทtdสุดท้ายและครั้งแรกในประเภทสุดท้าย trเพื่อให้ได้มุมด้านล่าง

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

ทางออกที่ดีที่สุดที่ฉันพบสำหรับมุมมนและพฤติกรรม CSS3 อื่น ๆ สำหรับ IE <9 มีอยู่ที่นี่: 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;
}

ไม่ต้องกังวลหาก Intellisense Visual Studio CSS ของคุณให้ขีดเส้นใต้สีเขียวสำหรับความเหมาะสมที่ไม่รู้จัก แต่ยังคงใช้งานได้เมื่อคุณเรียกใช้ องค์ประกอบบางอย่างไม่ได้รับการบันทึกไว้อย่างชัดเจน แต่ตัวอย่างนั้นค่อนข้างดีโดยเฉพาะในหน้าแรก

จากการใช้งานส่วนบุคคลฉันพบว่าไม่สามารถปัดเศษมุมของเซลล์ตาราง HTML ได้ด้วย CSS บริสุทธิ์ได้ การปัดเศษเส้นขอบนอกสุดของตารางทำได้

คุณจะต้องหันไปใช้ภาพตามที่อธิบายไว้ในบทช่วยสอนนี้หรืออื่น ๆ ที่คล้ายกัน :)

มันค่อนข้างหยาบ แต่นี่คือสิ่งที่ฉันรวบรวมไว้ซึ่งประกอบด้วย CSS และ HTML ทั้งหมด

• มุมด้านนอกโค้งมน
• แถวส่วนหัว
• แถวข้อมูลหลายแถว

ตัวอย่างนี้ยังทำให้การใช้ระดับหลอกสำหรับเซลล์ข้อมูลแต่ละ:hover <td>องค์ประกอบต่างๆสามารถอัปเดตได้ง่ายเพื่อให้ตรงกับความต้องการของคุณและสามารถปิดใช้งานโฮเวอร์ได้อย่างรวดเร็ว

(อย่างไรก็ตามฉันยังไม่ได้รับการ: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>

เพิ่ม<div>Wrapper รอบ ๆ ตารางและใช้ CSS ต่อไปนี้

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

ไปที่กระดาษห่อนี้

เพื่อปรับคำตอบที่ยอดเยี่ยมของ @luke flournoy - และหากคุณไม่ได้ใช้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;
}

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

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

คุณสามารถลองสิ่งนี้ได้หากคุณต้องการให้มุมโค้งมนในแต่ละด้านของโต๊ะโดยไม่ต้องสัมผัสเซลล์: 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>

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/

ต่อไปนี้เป็นสิ่งที่ฉันใช้ซึ่งใช้ได้ผลกับฉันในเบราว์เซอร์ดังนั้นฉันหวังว่ามันจะช่วยใครบางคนในอนาคต:

#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ส่วนนั้นสามารถเปลี่ยน / แก้ไขได้ตามต้องการและคุณสามารถค้นหาborder-radius.htcไฟล์ได้โดยทำการค้นหาใน Google หรือเว็บเบราว์เซอร์ที่คุณชื่นชอบ

นี่คือ css3เพียงเบราว์เซอร์ที่ไม่ใช่ IE <9 ล่าสุดเท่านั้นที่จะรองรับ

ลองดูที่นี่มันมาจากคุณสมบัติรอบสำหรับเบราว์เซอร์ที่มีทั้งหมด

เพิ่มระหว่าง<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 ค่าที่มากกว่ารัศมีขอบมุมของเซลล์ที่แยกจากกันเพื่อให้ได้เอฟเฟกต์มุมโค้งมนที่ราบรื่น

บทเรียนในเส้นขอบตาราง ...

หมายเหตุ: ควรดูโค้ด HTML / CSS ด้านล่างใน IE เท่านั้น โค้ดจะแสดงผลไม่ถูกต้องใน Chrome!

เราต้องจำไว้ว่า:

1. ตารางมีเส้นขอบ: ขอบเขตด้านนอก (ซึ่งอาจมีรัศมีขอบด้วย)

2. เซลล์เองก็มีเส้นขอบ (ซึ่งก็สามารถมีรัศมีขอบได้เช่นกัน)

3. เส้นขอบของตารางและเซลล์สามารถรบกวนซึ่งกันและกัน:

   เส้นขอบเซลล์สามารถทะลุผ่านเส้นขอบตารางได้ (เช่น: ขอบเขตตาราง)

   หากต้องการดูเอฟเฟกต์นี้ให้แก้ไขกฎสไตล์ CSS ในโค้ดด้านล่างดังนี้:
   i. ตาราง {border-ยุบ: แยก;}
   ii. ลบกฎสไตล์ที่ล้อมรอบเซลล์มุมของตาราง
   สาม. จากนั้นเล่นด้วยการเว้นระยะห่างเพื่อให้คุณเห็นสัญญาณรบกวน

4. อย่างไรก็ตามเส้นขอบตารางและเส้นขอบเซลล์สามารถรวมกันได้ (โดยใช้: border-collision: collision;)

5. เมื่อยุบแล้วเส้นขอบของเซลล์และตารางจะแทรกแซงในลักษณะที่แตกต่างกัน:

   ผม. หากเส้นขอบของตารางถูกปัดเศษ แต่ขอบเซลล์ยังคงเป็นสี่เหลี่ยมจัตุรัสรูปร่างของเซลล์จะมีความสำคัญเหนือกว่าและตารางจะเสียมุมโค้งไป

   ii. ในทางกลับกันถ้าเซลล์ของมุมโค้ง แต่ขอบเขตของตารางเป็นสี่เหลี่ยมคุณจะเห็นมุมสี่เหลี่ยมที่น่าเกลียดล้อมรอบความโค้งของเซลล์มุม

6. เนื่องจากแอตทริบิวต์ของเซลล์มีความสำคัญเหนือกว่าวิธีการปัดเศษทั้งสี่มุมของตารางนั้นคือ:

   ผม. การยุบเส้นขอบบนตาราง (ใช้: border-collision: collision;)

   ii. ตั้งค่าความโค้งที่คุณต้องการบนเซลล์มุมของตาราง
   สาม. ไม่สำคัญว่ามุมของโต๊ะจะโค้งมนหรือไม่ (กล่าวคือ: เส้นขอบรัศมีสามารถเป็นศูนย์ได้)

			.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>

CSS:

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

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