Блог / Html + Css / Делаем адаптивную таблицу несколько примеров

Делаем адаптивную таблицу несколько примеров

Сейчас адаптивность сайта играет важную роль. Ведь все больше пользователей заходят в интернет со смартфонов и планшетов. Одной из проблем для верстальщиков являются табличные данные, так как табличная верстка не предназначена для адаптации. Как же быть, если без таблиц на сайте не обойтись?

В этом уроке мы рассмотрим один способ адаптации таблицы. Зачастую заголовки таблицы располагаются сверху горизонтально. Мы на маленьких экранах будем их располагать вертикально, а для ячеек с даннями будем добавлять горизонтальную прокрутку, при этом заголовки будут оставаться на месте.

Для создания такой адаптивной таблицы нам понадобиться только css. Html cструктура нашей таблицы должна выглядеть следующим образом:

<table>
    <thead>
        <tr>
            <td>head1</td>
	...
        </tr>
    </thead>	
    <tbody>
        <tr>
            <td>content1</td>
	...
        </tr>             
    </tbody>  
</table>

Теперь рассмотрим наши css свойства. Будем использовать медиа-запрос @media для создания правил для маленьких экранов.

@media only screen and (max-width: 760px) {…}

Чтобы разместить шапку слева, а тело слева. Зададим им отображение со свойствами блочных элементов и зададим шапке обтекание слева.

table { display: block;}
thead { display: block; float: left; }
tbody { display: block;}

Для отдельных ячеек таблицы зададим свойство td { display: block;}, чтобы расположить их друг под другом. А для строк тела таблицы добавим свойство tbody tr { display: inline-block; }

Чтобы наши столбцы не перескакивали вниз добавим для tbody свойство white-space: nowrap; , ну и чтобы можно было видеть не помещающиеся столбцы добавим нашему tbody скрол используя свойство overflow-x: auto;

У нас получился такой набор css свойств для адаптивной таблицы:

@media only screen and (max-width: 760px) {
    	table { display: block;  }
	thead { display: block; ; float: left; }
	tbody { display: block; white-space: nowrap; overflow-x: auto; }
    	td{display: block; }
	tbody tr { display: inline-block; }
}

Можно объединить свойства и чуть сократить код:

@media only screen and (max-width: 760px) {
    	table, thead, tbody, td { display: block;  }
	thead { float: left; }
	tbody { white-space: nowrap; overflow-x: auto; }
	tbody tr { display: inline-block; }
}

Ну и вот готовый пример адаптивной страницы с использованием css:

head1	head2	head3	head4	head5
content1	content2	content3	content4	content5
content1-2	content2-2	content3-2	content4-2	content5-2
content1-3	content2-3	content3-3	content4-3	content5-3
content1-4	content2-4	content3-4	content4-4	content5-4

Ну и можете посмотреть готовый код этой таблицы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    table{
        border: 2px solid black;
        border-collapse: collapse;
        width: 100%;
    }    
    thead{
        background: #333; 
        color: white;
        font-weight: bold;
    }
    table td{
       padding: 5px;
       border: 1px solid #c0c0c0; 
    }
    @media only screen and (max-width: 760px) {

	table { border-collapse: collapse; border-spacing: 0; border: none; }
 	td { margin: 0; vertical-align: top; }
	table { display: block; position: relative; }
	thead { display: block; float: left; }
	tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	thead tr { display: block; }
	tbody tr { display: inline-block; vertical-align: top; }
	td { display: block; text-align: left; }
}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>head1</td>
                <td>head2</td>
                <td>head3</td>
                <td>head4</td>
                <td>head5</td>
            </tr>
         </thead>
         <tbody>
                <tr>
                    <td>content1</td>
                    <td>content2</td>
                    <td>content3</td>
                    <td>content4</td>
                    <td>content5</td>
                </tr>
                <tr>
                    <td>content1-2</td>
                    <td>content2-2</td>
                    <td>content3-2</td>
                    <td>content4-2</td>
                    <td>content5-2</td>
                </tr>
                <tr>
                    <td>content1-3</td>
                    <td>content2-3</td>
                    <td>content3-3</td>
                    <td>content4-3</td>
                    <td>content5-3</td>
                </tr>
                <tr>
                    <td>content1-4</td>
                    <td>content2-4</td>
                    <td>content3-4</td>
                    <td>content4-4</td>
                    <td>content5-4</td>
                </tr>
         </tbody>  
    </table>
</body>
</html>

-----------------------------------------------------------------------------

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння