display:table 圆角
在工作中有没有遇到过这么一个问题 — 美工画了一个表格,表格是使用圆角的。发现table这个标签画圆角很麻烦,因此使用了如下技术解决问题:
1、div 以 display : table;属性显示
2、border-radius: 10px 0px 0px 0px;顺序依次是 上 右 下 左
3、通过CSS设置样式
实现
css
* {
margin: 0;
padding: 0;
}
.getexp-tr {
color: #fff;
}
.grid-number {
color: #f45d49;
}
.border-top {
border-top: 0;
}
.border-left {
border-left: 0;
}
.border-bottom {
border-bottom: 0;
}
.border-right {
border-right: 0;
}
table {
font-size: 14px;
text-align: center;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
border: 1px #000000;
}
table tr th,
table tr td {
height: 120px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #000000;
}
table tr th {
border-top: 1px solid #000000;
color: #333333;
}
table tr:first-child th:first-child {
border-top-left-radius: 12px;
}
table tr:first-child th:last-child {
border-top-right-radius: 12px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 12px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
.color333 {
color: #333333;
}
html
<div class="getexp" style="padding: 20px;">
<table class="table" width="500px">
<thead class="getexp-head">
<tr class="getexp-tr">
<th align="center" >1模块</th>
<th align="center" >2模块</th>
<th align="center" >3模块</th>
</tr>
</thead>
<tbody class="color333">
<tr>
<td width="33.3%">小练习1</td>
<td width="33.3%" class=" border-top border-left ">多练习1</td>
<td width="33.3%">无上限</td>
</tr>
<tr>
<td>小练习2</td>
<td class=" border-top border-left ">多练习2</td>
<td>无上限</td>
</tr>
</tbody>
</table>
</div>