我正在尝试为 html 表格圆 Angular 编写 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
表格设置圆 Angular ,而不是为 thead
设置圆 Angular 。
如何做到这一点?有什么帮助/建议吗?
最佳答案
您需要重写 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
关于css - html表格的圆 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43731792/