Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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



Отзывчивая таблица

Отзывчивая или адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого:

Фамилия Имя Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Щипунов Андрей 50 50 50 50 50 50 50 50 50 50 50 50
Щипунова Татьяна 94 94 94 94 94 94 94 94 94 94 94 94
Щипунова Кристина 67 67 67 67 67 67 67 67 67 67 67 67

Добавьте элемент контейнера (например, <div>) с overflow-x:auto вокруг элемента <table>, чтобы сделать его отзывчивым:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Попробуйте сами »

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлен параметр переполнения прокрутки "overflow:scroll").


Еще примеры таблицы

Создание необычной таблицы
В этом примере показано, как создать необычную таблицу.

Установка положения заголовка таблицы
В этом примере показано, как расположить заголовок таблицы.


Практика: таблица

Упражнение: граница таблицы

Установите границу в "2px solid green" для элементов table, th и td.

<style>
 {
  : 2px solid green;
}
</style>

<body>
<table>
  <tr>
    <th>Фамилия</th>
    <th>Имя</th>
  </tr>
  <tr>
    <td>Щипунов</td>
    <td>Андрей</td>
  </tr>
  <tr>
    <td>Щипунова</td>
    <td>Кристина</td>
  </tr>
</table>
</body>


Все CSS свойства таблицы

Свойство Описание
border Устанавливает все свойства границы в одном объявлении
border-collapse Указывает, следует ли сворачивать границы таблицы
border-spacing Задает расстояние между границами соседних ячеек
caption-side Задает размещение заголовка таблицы
empty-cells Указывает, следует ли отображать границы и фон на пустых ячейках таблицы
table-layout Задает алгоритм компоновки таблицы


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.