[英]Rounded corners for html table
I am trying to write css
for html table rounded corners, but my style is applying thread
also. 我正在尝试为html表圆角编写
css
,但是我的样式也正在应用thread
。 for this I have tried below way. 为此,我尝试了以下方式。
.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>
result 结果
I want only rounded corners for html
table not for thead
. 我只想要
html
表的圆角而不是thead
圆角。
How to do this? 这个怎么做? Any help/suggestions?
任何帮助/建议吗?
You need to rewrite CSS code. 您需要重写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;
}
Please check this link https://jsfiddle.net/aasim2001/k012wy0f/#&togetherjs=6lc9KgDEuf 请检查此链接https://jsfiddle.net/aasim2001/k012wy0f/#&togetherjs=6lc9KgDEuf
.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
I have updated the css, try it. 我已经更新了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>
Change your css to this: 将您的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;
}
Your CSS is very disturbed one. 您的CSS非常不安。 You have used unnecessary border-radius and border-collapse.
您已经使用了不必要的边框半径和边框折叠。
I made changes and this is updated fiddle: Check this: 我进行了更改,这是更新的小提琴:检查此:
https://jsfiddle.net/ahtfp21u/ https://jsfiddle.net/ahtfp21u/
There is still a scope of improvement in your CSS: 您的CSS仍有改进的余地:
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;
}
Try this, just removed few border
styling and added for entire table and for first tr > th
. 试试这个,只是删除了一些
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.