<table>
<tr>
<th> </th>
<th>th</th>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td rowspan="2">td</td>
<td>td</td>
<td >td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>th</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>th</td>
<td>td</td>
<td colspan="2">td</td>
<td>td</td>
</tr>
</table>
body{
padding:30px;
}
$kado:6px;
table {
border-collapse: collapse;
overflow: hidden;
border-radius: $kado;
position: relative;
background: #fff;
&:before, &:after {
content: "";
z-index: 2;
top: 0;
bottom: 0;
width: 7px;
position: absolute;
border: 1px solid #aaa;
}
&:before {
left: 0;
border-right: none;
border-top-left-radius: $kado;
border-bottom-left-radius: $kado;
}
&:after {
right: 0;
border-left: none;
border-top-right-radius: $kado;
border-bottom-right-radius: $kado;
}
tr {
&:first-child {
th:first-child, td:first-child {
border-top-left-radius: $kado;
}
th:last-child, td:last-child {
border-top-right-radius: $kado;
}
}
&:last-child {
th:first-child, td:first-child {
border-bottom-left-radius: $kado;
}
th:last-child, td:last-child {
border-bottom-right-radius: $kado;
}
}
}
th, td {
border: 1px solid #aaa;
padding: .6em 3em;
}
th {
background: #ccc;
}
td {
background: #fff;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.