Адаптивная таблица 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>