HTML表格的圓角

Question

我正在嘗試為html表圓角編寫css ，但是我的樣式也正在應用thread 。 為此，我嘗試了以下方式。

 .tier_price_break { width: 225px; } /* .tier_price_break, td, th { border: 1px solid #ddd; }*/ .tier_price_break, td { border: 1px solid #cde2f5; /*#ddd;*/ border-radius: 8px; } .tier_price_break, th { border: 1px solid #cde2f5; /*#ddd;*/ border-radius: 8px; } .tier_price_break { border-collapse: separate; float: right; border-spacing: 0; } .tier_price_break>td { height: 15px; } .tier_price_break>tbody>tr>td { padding: 0px 0px !important; border: none; } .tier_price_break>thead>tr>th { padding: 0px 0px !important; } @media only screen and (max-width: 768px) { .tier_price_break { border-collapse: collapse; float: none !important; } .tier_price_break { width: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { /* For portrait layouts only */ .tier_price_break { width: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ .tier_price_break { width: 180px !important; } } .tier_price_break>tbody { border-collapse: collapse; border-collapse: separate; border-spacing: 4px; } .tier_price_break tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .tier_price_break tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } .tier_price_break thead th:first-child { border-radius: 10px 0 0 0; } .tier_price_break thead th:last-child { border-radius: 0 10px 0 0; } 

 <table class="tier_price_break" cellpadding="0" cellspacing="0" border="1"> <thead> <tr> <th colspan="2"> <div style="text-align: center;"> Quantity Discounts </div> </th> </tr> <tr> <th style="width: 50%;"> <div style="text-align: center;"> Qty. </div> </th> <th style="width: 50%;"> <div style="text-align: center;"> Pack Price </div> </th> </tr> </thead> <tbody> <tr> <td> <div style="text-align: center;"> 50 </div> </td> <td> <div style="text-align: center;"> $0.28 </div> </td> </tr> <tr> <td> <div style="text-align: center;"> 500 </div> </td> <td> <div style="text-align: center;"> $0.21 </div> </td> </tr> </tbody> </table> 

結果

我只想要html表的圓角而不是thead圓角。

這個怎么做？ 任何幫助/建議嗎？

我試圖寫如下表的css 。

Answer 1

您需要重寫CSS代碼。

.tier_price_break{
  border-radius:8px;
  border:1px solid #cde2f5;
  background:#fff;
}
.tier_price_break thead th{
  border:none;
  border-bottom:1px solid #cde2f5;
}
.tier_price_break thead th:nth-child(2){
  border-left:1px solid #cde2f5;
}
.tier_price_break tbody td{
    border:1px solid transparent;
}

請檢查此鏈接https://jsfiddle.net/aasim2001/k012wy0f/#&togetherjs=6lc9KgDEuf

Answer 2

 .tier_price_break{ border: 1px solid #ccc; border-radius: 8px; } .tier_price_break tr:first-child th{ border-bottom: 1px solid #ccc; } 

  <table class="tier_price_break" width="100%" cellpadding="5" cellspacing="0" border="0"> <thead> <tr> <th colspan="2"> <div style="text-align: center;"> Quantity Discounts </div> </th> </tr> <tr> <th style="width: 50%;"> <div style="text-align: center;"> Qty. </div> </th> <th style="width: 50%;"> <div style="text-align: center;"> Pack Price </div> </th> </tr> </thead> <tbody> <tr> <td> <div style="text-align: center;"> 50 </div> </td> <td> <div style="text-align: center;"> $0.28 </div> </td> </tr> <tr> <td> <div style="text-align: center;"> 500 </div> </td> <td> <div style="text-align: center;"> $0.21 </div> </td> </tr> </tbody> </table> Run code snippet 

Answer 3

我已經更新了CSS，請嘗試一下。

 <style type="text/css">.tier_price_break { width: 225px; } /* .tier_price_break, td, th { border: 1px solid #ddd; }*/ .tier_price_break, td { border: 1px solid #cde2f5; /*#ddd;*/ border-radius: 8px; } .tier_price_break, th { border: 1px solid #cde2f5; /*#ddd;*/ } .tier_price_break { border-collapse: separate; float: right; border-spacing: 0; } .tier_price_break>td { height: 15px; } .tier_price_break>tbody>tr>td { padding: 0px 0px !important; border: none; } .tier_price_break>thead>tr>th { padding: 0px 0px !important; } @media only screen and (max-width: 768px) { .tier_price_break { border-collapse: collapse; float: none !important; } .tier_price_break { width: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { /* For portrait layouts only */ .tier_price_break { width: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ .tier_price_break { width: 180px !important; } } .tier_price_break>tbody { border-collapse: collapse; border-collapse: separate; border-spacing: 4px; } .tier_price_break tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .tier_price_break tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } .tier_price_break thead tr:nth-child(2) th { border: none; } </style> 

 <table class="tier_price_break" cellpadding="0" cellspacing="0" border="1"> <thead> <tr> <th colspan="2"> <div style="text-align: center;"> Quantity Discounts </div> </th> </tr> <tr> <th style="width: 50%;"> <div style="text-align: center;"> Qty. </div> </th> <th style="width: 50%;"> <div style="text-align: center;"> Pack Price </div> </th> </tr> </thead> <tbody> <tr> <td> <div style="text-align: center;"> 50 </div> </td> <td> <div style="text-align: center;"> $0.28 </div> </td> </tr> <tr> <td> <div style="text-align: center;"> 500 </div> </td> <td> <div style="text-align: center;"> $0.21 </div> </td> </tr> </tbody> </table> 

Answer 4

將您的CSS更改為此：

 .tier_price_break{
    width: 225px;
}

   /* .tier_price_break, td, th {
    border: 1px solid #ddd;
}*/

.tier_price_break {
    border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break {
    /*border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break {
    border-collapse: separate;
    float: right;
    border-spacing: 0;
}

.tier_price_break > td {
    height: 15px;
}

.tier_price_break > tbody > tr > td {
    padding: 0px 0px !important;
    border: none;
}

.tier_price_break > thead > tr > th{
    padding: 0px 0px !important;
}

Answer 5

您的CSS非常不安。 您已經使用了不必要的邊框半徑和邊框折疊。

我進行了更改，這是更新的小提琴：檢查此：

https://jsfiddle.net/ahtfp21u/

您的CSS仍有改進的余地：

CSS：

.tier_price_break{
    width: 225px;
}

   /* .tier_price_break, td, th {
    border: 1px solid #ddd;
}*/


.tier_price_break {
    border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break {
    float: right;
    border-spacing: 0;
}

.tier_price_break > td {
    height: 15px;
}

thead th, tbody > tr > td {
    padding: 0px 0px !important;
    border: none;
}

.tier_price_break > thead > tr > th{
    padding: 0px 0px !important;
}

@media only screen and (max-width: 768px){
    .tier_price_break {

        float: none !important;
    }
    .tier_price_break{
        width: 180px !important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .tier_price_break{
        width: 180px !important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .tier_price_break{
        width: 180px !important;
    }
}

.tier_price_break > tbody {
    border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 4px;
}

Answer 6

試試這個，只是刪除了一些border樣式，並為整個表格和第一個tr > th添加了border 。

 .tier_price_break{ width: 225px; } /* .tier_price_break, td, th { border: 1px solid #ddd; }*/ .tier_price_break { border: 1px solid #cde2f5; /*#ddd;*/ border-radius: 8px; } .tier_price_break th { border: none; } .tier_price_break tr:first-child th { border-bottom: 1px solid #cde2f5; } .tier_price_break { border-collapse: separate; float: right; border-spacing: 0; } .tier_price_break > td { height: 15px; } .tier_price_break > tbody > tr > td { padding: 0px 0px !important; border: none; } .tier_price_break > thead > tr > th{ padding: 0px 0px !important; } @media only screen and (max-width: 768px){ .tier_price_break { /*border-collapse: collapse;*/ float: none !important; } .tier_price_break{ width: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { /* For portrait layouts only */ .tier_price_break{ width: 180px !important; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ .tier_price_break{ width: 180px !important; } } .tier_price_break > tbody { /*border-collapse: collapse;*/ border-collapse: separate; border-spacing: 4px; } 

  <table class="tier_price_break" cellpadding="0" cellspacing="0" border="1"> <thead> <tr> <th colspan="2"> <div style="text-align: center;"> Quantity Discounts </div> </th> </tr> <tr> <th style="width: 50%;"> <div style="text-align: center;"> Qty. </div> </th> <th style="width: 50%;"> <div style="text-align: center;"> Pack Price </div> </th> </tr> </thead> <tbody> <tr> <td> <div style="text-align: center;"> 50 </div> </td> <td> <div style="text-align: center;"> $0.28 </div> </td> </tr> <tr> <td> <div style="text-align: center;"> 500 </div> </td> <td> <div style="text-align: center;"> $0.21 </div> </td> </tr> </tbody> </table>