HTML
<div class="table-responsive">
<table class="table-bordered table-striped table-hover">
<thead>
<tr>
<th>Voor-<br />naam</th>
<th>Achter-<br />naam</th>
<th>Leeftijd</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rand">Piet</td>
<td>Jansen</td>
<td>32 jaar</td>
</tr>
<tr>
<td>Marie</td>
<td>Verdoorn</td>
<td class="rand merge-vert">24 jaar</td>
</tr>
<tr>
<td>Jeroen</td>
<td>Doormans</td>
<td class="rand">29 jaar</td>
</tr>
<tr>
<td class="rand merge-hor">Saskia</td>
<td class="rand">Vermeer</td>
<td>27 jaar</td>
</tr>
</tbody>
</table>
</div>
CSS
/*---START: NIET WIJZIGEN---*/
table,
table * {
box-sizing:border-box;
margin:0;
padding:0;
}
table {
width:100%;
max-width:100%;
border-spacing:0;
border-collapse:collapse;
background-color:transparent;
}
table th,
table td {
padding:8px;
line-height:1.4;
vertical-align:top;
border-top:1px solid #ddd;
}
table th {
text-align:left;
vertical-align:bottom;
border-bottom:2px solid #ddd;
}
table tr:first-child th,
table tr:first-child td {
border-top:0;
}
.table-bordered {
border:1px solid #ddd;
}
.table-bordered th,
.table-bordered td {
border:1px solid #ddd;
}
.table-bordered thead th,
.table-bordered thead td {
border-bottom-width:1px;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color:#f9f9f9;
}
.table-hover tbody tr:hover {
background-color:#f5f5f5;
}
.table-responsive {
min-height:.01%;
box-sizing:border-box;
overflow-x:auto;
padding: 1px;
}
@media screen and (max-width:767px) {
.table-responsive {
width:100%;
border:1px solid #ddd;
box-sizing:border-box;
overflow-y:hidden;
-ms-overflow-style:-ms-autohiding-scrollbar;
}
.table-responsive table {
margin-bottom:0;
}
.table-responsive table td,
.table-responsive table th {
/*volgende regel weg als je collapse wilt op smartphone*/
white-space:nowrap;
}
.table-responsive .table-bordered {
border:0;
}
.table-responsive .table-bordered tr td:first-child,
.table-responsive .table-bordered tr th:first-child {
border-left:0;
}
.table-responsive .table-bordered tr td:last-child,
.table-responsive .table-bordered tr th:last-child {
border-right:0;
}
.table-responsive .table-bordered tbody tr:last-child td,
.table-responsive .table-bordered tbody tr:last-child th {
border-bottom:0;
}
}
@media print {
thead {
display:table-header-group;
}
tr {
page-break-inside:avoid;
}
table {
border-collapse:collapse !important;
}
table th,
table td {
background-color:#fff !important;
}
.table-bordered th
.table-bordered td {
border:1px solid #ddd !important;
}
}
/*---EINDE: NIET WIJZIGEN---*/
/*---START: JOUW VORMGEVING---*/
table th,
table td {
font-family: Arial, sans-serif;
font-size: 14px;
border-color: #c0c0c0;
}
/*vormgeving header*/
table th {
color: #00c;
text-align: left;
}
table th:last-child {
color: #00c;
text-align: right;
}
/*vormgeving data kolommen*/
table td:nth-child(1) {
width: 15%;
text-align: left;
}
table td:nth-child(2) {
width: 35%;
text-align: left;
}
table td:nth-child(3) {
width: 50%;
text-align: right;
}
/*randen smartphone*/
@media screen and (max-width:767px) {
.table-responsive {
border: 0;
}
.table-responsive .table-bordered {
border: 1px solid #ddd;
}
.table-responsive .table-bordered tr td.rand:first-child {
border-left: 2px solid #bbf;
}
.table-responsive .table-bordered tr td.rand:last-child {
border-right: 2px solid #bbf;
}
.table-responsive .table-bordered tbody tr:last-child td.rand {
border-bottom: 2px solid #bbf;
}
}
/*randen*/
table tr td.rand {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-style: solid;
border-color: #bbf;
}
/* cellen verticaal optisch samenvoegen */
table tr td.merge-vert {
border-bottom-color: transparent !important;
}
/* cellen horizontaal optisch samenvoegen */
table tr td.merge-hor {
border-right-color: transparent !important;
}
/*---EINDE: JOUW VORMGEVING---*/