display:table 圆角

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>