Адаптивные таблицы · Bootstrap 3

<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Пол</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Аня</td>
<td>Ж</td>
<td>20</td>
</tr>
<tr>
<td>Ваня</td>
<td>М</td>
<td>18</td>
</tr>
<tr>
<td>Баба люба</td>
<td>Ж</td>
<td>75</td>
</tr>
<tr>
<td>Дядя Вася</td>
<td>М</td>
<td>70</td>
</tr>
</tbody>
</table>

<table class="table table-striped">
<thead>
<tr>
<th>Время года</th>
<th>Дождь</th>
<th>Снег</th>
</tr>
</thead>
<tbody>
<tr>
<td>Зима</td>
<td>нет</td>
<td>есть</td>
</tr>
<tr>
<td>Весна</td>
<td>есть</td>
<td>есть</td>
</tr>
<tr>
<td>Лето</td>
<td>есть</td>
<td>нет</td>
</tr>
<tr>
<td>Осень</td>
<td>есть</td>
<td>есть</td>
</tr>
</tbody>
</table>

<table class="table table-bordered">
<thead>
<tr>
<th>Бордюр</th>
<th>Машина</th>
<th>Отношение</th>
</tr>
</thead>
<tbody>
<tr>
<td>10см</td>
<td>заезжает</td>
<td>хорошее</td>
</tr>
<tr>
<td>20см</td>
<td>не каждая</td>
<td>напряжённое</td>
</tr>
<tr>
<td>30см</td>
<td>не заезжает</td>
<td>негативное</td>
</tr>
</tbody>
</table>

<table class="table table-hover">
<thead>
<tr>
<th>День</th>
<th>Погода</th>
<th>Настроение</th>
</tr>
</thead>
<tbody>
<tr>
<td>31 декабря</td>
<td>хорошая</td>
<td>хорошее</td>
</tr>
<tr>
<td>23 февраля</td>
<td>плохая</td>
<td>хорошее</td>
</tr>
<tr>
<td>8 марта</td>
<td>плохая</td>
<td>плохое</td>
</tr>
</tbody>
</table>

<table class="table table-condensed">
<thead>
<tr>
<th>Дни после зарплаты</th>
<th>Количество денег</th>
<th>Настроение</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 день</td>
<td>50%</td>
<td>хорошее</td>
</tr>
<tr>
<td>5 дней</td>
<td>10%</td>
<td>среднее</td>
</tr>
<tr>
<td>10 дней</td>
<td>1%</td>
<td>плохое</td>
</tr>
<tr>
<td>20 дней</td>
<td>Долг</td>
<td>среднее</td>
</tr>
</tbody>
</table>

<div class="table-responsive">
<table class="table">
<caption>Количество дней в январе</caption>
<tbody>
<tr>
<td>1 </td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>

<style>
.active {font-weight:bold;}
</style>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Класс</th>
<th>Состояние и цвет</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>class="active"</td>
<td>Изменяет состояние при наведении</td>
</tr>
<tr class="success">
<td>class="success"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
<tr class="info">
<td>class="info"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
<tr class="warning">
<td>class="warning"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
<tr class="danger">
<td>class="danger"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
</tbody>
</table>
</div>