Адаптивная таблица CSS3 table

CSS3 пример адаптивной верстки таблиц мы сверстали на mdoceramic.ru

/* --------------------------------------------------------	*/
/* CSS3 */
/* --------------------------------------------------------	*/
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
table {
border-collapse: collapse;
border:1px solid #d3d3d3;
background:#fefefe;
width:100%;
margin:5% auto 0;
-moz-border-radius:5px; /* FF1+ */
-webkit-border-radius:5px; /* Saf3-4 */
border-radius:5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.zebra td, .zebra th {
padding: 10px;
border-bottom: 1px solid #f2f2f2;
}
.zebra tbody tr:nth-child(even) {
background: #f5f5f5;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
flex-flow: stretch nowrap;
}
.zebra th {
text-align: left;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-bottom: 1px solid #ccc;
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
background-image: -o-linear-gradient(top, #f5f5f5, #eee);
background-image: linear-gradient(top, #f5f5f5, #eee);
}
.zebra th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.zebra th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.zebra th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.zebra tfoot td {
border-bottom: 0;
border-top: 1px solid #fff;
background-color: #f1f1f1;
}
.zebra tfoot td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.zebra tfoot td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
.zebra tfoot td:only-child{
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px
border-radius: 0 0 6px 6px
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
display: none;
}
table tr {
//border-bottom: 3px solid #ddd;
display: block;
//margin-bottom: .625em;
}
table td {
//border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: left;
}
table td:before {
content: attr(aria-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
table {
width:100%;
border-collapse:collapse;
border:0px !important;
}
table, th, td {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
}
table th, table td {
padding:15px 20px !important;
font-size:15px;
border:1px solid #eeeef4 !important;
}
table th {
font-family: 'Montserrat', sans-serif;
font-size:13px;;
font-weight:bold;
color:#2f3235;
background:#fff;
text-transform:uppercase;
}
table td {
color:#8c9aaa;
background:#ffffff;
padding:15px 20px;
border-top:1px dashed #eeeef4 !important;
border-bottom:1px dashed #eeeef4 !important;
}
table a:hover{
text-decoration:none;
} 

Пример таблицы

<table class="zebra" cellspacing="0">
<tbody>
<th colspan='2'><strong>Пример верстки адаптивной таблицы</strong></th>
<tr>
<td>Example</td>
<td>This text is simply as example.</td>
</tr>
<tr>
<td><b>Bolded example</b></td>
<td>This text is simply as example.</td>
</tr>
</tbody>
</table>