วิธีเพิ่มรัศมีเส้นขอบบนแถวตาราง

ใครรู้วิธีแต่ง tr ตามที่เราชอบบ้าง?

ฉันใช้การยุบเส้นขอบบนตารางหลังจากนั้น tr สามารถแสดงเส้นขอบทึบ 1px ที่ฉันให้ได้

อย่างไรก็ตามเมื่อฉันลอง-moz-border-radiusแล้วมันไม่ได้ผล แม้แต่ระยะขอบธรรมดาก็ไม่ได้ผล

คุณสามารถใช้ border-radius กับ td เท่านั้นไม่ใช่ tr หรือ table ฉันได้รับสิ่งนี้สำหรับตารางมุมมนโดยใช้สไตล์เหล่านี้:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

อย่าลืมใส่คำนำหน้าผู้ขายทั้งหมด นี่คือตัวอย่างของการใช้งานจริง

ระยะห่างจริงระหว่างแถว

นี่เป็นกระทู้เก่า แต่ฉันสังเกตเห็นการอ่านความคิดเห็นจาก OP เกี่ยวกับคำตอบอื่น ๆ ที่เห็นได้ชัดว่าเป้าหมายเดิมมีborder-radiusอยู่ในแถวและช่องว่างระหว่างแถว ไม่ปรากฏว่าโซลูชันปัจจุบันทำได้อย่างแน่นอน คำตอบของ theazureshadow มุ่งหน้าไปในทิศทางที่ถูกต้อง แต่ดูเหมือนว่าจะต้องมากกว่านี้อีกเล็กน้อย

สำหรับผู้ที่สนใจในเรื่องนี้นี่คือซอที่แยกแถวและใช้รัศมีกับแต่ละแถว (หมายเหตุ: Firefox มีข้อบกพร่องในการแสดง / ตัดbackground-colorที่รัศมีขอบ )

รหัสมีดังต่อไปนี้ (และตามที่ระบุไว้สำหรับการสนับสนุนเบราว์เซอร์ก่อนหน้านี้คำนำหน้าผู้จำหน่ายต่างๆที่border-radiusจำเป็นต้องเพิ่ม)

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

ข้อมูลโบนัส: border-radiusไม่มีผลกับตารางที่มีborder-collapse: collapse;และเส้นขอบที่ตั้งไว้ในtd's และมันไม่สำคัญว่าถ้าborder-radiusตั้งอยู่บนtable, trหรือtd-IT ละเว้น

http://jsfiddle.net/Exe3g/

องค์ประกอบ tr ให้เกียรติเส้นขอบรัศมี สามารถใช้ html และ css บริสุทธิ์ไม่มีจาวาสคริปต์

ลิงค์ JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

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

คุณสามารถกำหนดรัศมีขอบให้กับมุมซ้ายทั้งสองของ TD แรกและมุมขวามือสองมุมของมุมสุดท้าย คุณสามารถใช้first-childและlast-childตัวเลือกตามที่แนะนำโดย theazureshadow แต่ IE เวอร์ชันเก่าอาจได้รับการสนับสนุนไม่ดี การกำหนดคลาสเช่น.first-columnและ.last-columnเพื่อตอบสนองวัตถุประสงค์นี้อาจง่ายกว่า

ตามOperaมาตรฐาน CSS3 ไม่ได้กำหนดการใช้border-radiusบน TD ประสบการณ์ของฉันคือ Firefox และ Chrome รองรับ แต่ Opera ไม่ (ไม่รู้เกี่ยวกับ IE) วิธีแก้ปัญหาคือการรวมเนื้อหา td ใน div แล้วใช้border-radiusกับ div

ไม่ได้พยายามใช้เครดิตใด ๆ ที่นี่เครดิตทั้งหมดไปที่ @theazureshadow สำหรับการตอบกลับของเขา แต่โดยส่วนตัวฉันต้องปรับให้เหมาะกับตารางที่มีบางส่วน<th>แทนที่จะเป็น<td>เป็นเซลล์ของแถวแรก

ฉันแค่โพสต์ฉบับแก้ไขที่นี่ในกรณีที่บางส่วนของคุณต้องการที่จะใช้ @ theazureshadow วิธีการแก้ปัญหา แต่อย่างผมมีบางอย่างในครั้งแรก<th> <tr>ต้องใช้คลาส "reportTable" กับตารางเท่านั้น:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

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

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

อย่าลังเลที่จะปรับแพดิงรัศมีและอื่น ๆ ให้เหมาะกับความต้องการของคุณ หวังว่าจะช่วยให้ผู้คน!

ฉันพบว่าการเพิ่ม border-radius ให้กับตาราง trs และ tds ดูเหมือนจะไม่ทำงาน 100% ใน Chrome, FF และ IE เวอร์ชันล่าสุด สิ่งที่ฉันทำแทนคือฉันห่อตารางด้วย div และใส่เส้นขอบรัศมีไว้

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

ถ้าโต๊ะของคุณไม่ใช่width: 100%คุณสามารถทำกระดาษห่อหุ้มfloat: leftได้ แต่อย่าลืมล้างมัน

ใช้เส้นขอบยุบ: แยก; และระยะห่างชายแดน: 0; แต่ใช้เฉพาะ border-right และ border-bottom สำหรับ tds โดยใช้ border-top กับ th และ border-left กับ tr td: nth-child (1) เท่านั้น

จากนั้นคุณสามารถใช้รัศมีขอบกับ tds มุม (โดยใช้ลูกที่ n เพื่อค้นหา)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

หรือใช้กล่องเงาถ้าตารางมีการยุบ

คำตอบทั้งหมดยาวเกินไป วิธีที่ง่ายที่สุดในการเพิ่มรัศมีเส้นขอบให้กับองค์ประกอบตารางที่ยอมรับเส้นขอบเป็นคุณสมบัติคือการทำรัศมีขอบด้วย overflow: hidden

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;