CSS — Резиновая таблица

Понадобилось для одного сайта.

Нашел хороший пример.

HTML

<table>
 <thead>
 <tr>
 <th>Payment</th>
 <th>Issue Date</th>
 <th>Amount</th>
 <th>Period</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td data-label="Payment">Payment #1</td>
 <td data-label="Issue Date">02/01/2015</td>
 <td data-label="Amount">$2,311</td>
 <td data-label="Period">01/01/2015 - 01/31/2015</td>
 </tr>
 <tr>
 <td data-label="Payment">Payment #2</td>
 <td data-label="Issue Date">03/01/2015</td>
 <td data-label="Amount">$3,211</td>
 <td data-label="Period">02/01/2015 - 02/28/2015</td>
 </tr>
 </tbody>
</table>

CSS

 body {
 font-family: arial;
 }
 
 table {
 border: 1px solid #ccc;
 width: 100%;
 margin: 0;
 padding: 0;
 border-collapse: collapse;
 border-spacing: 0;
 }
 
 table tr {
 border: 1px solid #ddd;
 padding: 5px;
 }
 
 table th,
 table td {
 padding: 10px;
 text-align: center;
 }
 
 table th {
 text-transform: uppercase;
 font-size: 14px;
 letter-spacing: 1px;
 }
 
 @media screen and (max-width: 600px) {
 table {
 border: 0;
 }
 table thead {
 display: none;
 }
 table tr {
 margin-bottom: 10px;
 display: block;
 border-bottom: 2px solid #ddd;
 }
 table td {
 display: block;
 text-align: right;
 font-size: 13px;
 border-bottom: 1px dotted #ccc;
 }
 table td:last-child {
 border-bottom: 0;
 }
 table td:before {
 content: attr(data-label);
 float: left;
 text-transform: uppercase;
 font-weight: bold;
 }
 }

Демо здесь

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *