Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Бутстрап таблица: Таблицы. Содержание · Bootstrap v5.0.2

Содержание

Таблицы · Bootstrap на русском

Из-за повсеместного использования таблицы через сторонние виджеты календарями и датами, мы разработали таблицы Для быть отказ в. Просто добавьте базовый класс .table любой <table>, расширить пользовательские стили или различных классов включен модификатор.

Содержание

Примеры

Используя самые элементарные таблица наценки, вот как .table на основе таблицы смотри на Bootstrap.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы также можете инвертировать цвета—со светлым текстом на темном фоне—с . table-inverse.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица параметры заголовка

Аналогично по умолчанию и обратные таблицы, использовать один из двух классов модификатор, чтобы сделать <thead> появляются светло-или темно-серый.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Зебра»

Используйте .table-striped для добавления зебра-чередование любого таблица подряд в <tbody>.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Рамочная таблица

Добавить .table-bordered для границ со всех сторон таблица и клеток.

#ИмяФамилияПользователь
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Наведение строк

Добавить .table-hover для включения наведение состояние О таблица строк в <tbody>.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Небольшая таблица

Добавьте класс .table-sm, чтобы сделать таблицу более компактной, уменьшив наполовину внутренний отступ в ячейках.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

Использовать контекстные классы для стиля строк таблицы или отдельных ячеек.

КлассОписание
.table-activeПрименяет цвет при наведении на конкретную строку или ячейку
.table-successУказывает на успешное или позитивное действие
.table-infoУказывает на нейтральные информативные изменения или действия
.table-warningУказывает на предупреждения, которые могут потребовать внимания
.table-dangerУказывает на опасное или потенциально негативное действие
#Заголовок столбцаЗаголовок столбцаЗаголовок столбца
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Регулярное таблица вариантов предпосылки не доступно с обратным таблица, однако, вы можете использовать текст или фона утилит для достижения подобных стилей.

#Заголовок столбцаЗаголовок столбцаЗаголовок столбца
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

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

Сделать таблицу адаптивной можно просто с помощью добавления класса .table-responsive к .table, благодаря этому у Вас появятся полосы прокрутки таблицы на устройствах с малыми дисплеями (менее 768px). При просмотре таблицы на устройстве с шириной экрана более чем 768px Вы даже не заметите разницы.

Вертикальной подрезки/усечения

Адаптивный таблицы использовать overflow-y: hidden, который загибается любое содержание, которое выходит за пределы нижней или верхней кромками таблица. В частности, это может клип выпадающие меню и другие сторонние виджеты.

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием width что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте этот ответ на Stack Overflow.

#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<div>
  <table>
    ...
  </table>
</div>

Обратный стиль

Превратите традиционную таблицу на их стороне с помощью table-reflow. При использовании обратного стиля, заголовок таблицы будет в первом столбце, первая строка таблицы становится второй колонкой, вторая строка становится третьей колонкой, и т. д.

Содержание заказа и сложных таблицы

Помните, что table-reflow изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими <th> таблица заголовков ячеек для каждой строки и столбца.

Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью rowspan или colspan атрибуты).

#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Bootstrap таблицы для начинающих

Продолжаем изучать Bootstrap и сегодня как вы могли догадаться из название пойдет речь о таблицах.

Стандартные бутстраповские таблицы имеют такое оформление:

  • Внутренние отступы ячеек.
  • Нету вертикальных границ, но добавлены серые горизонтальные.

Для этого нужно добавить вашей таблице класс table :


  <table>
    <tbody>
      <tr>
        <th>Имя</th>
        <th>Работа</th>
        <th>Город</th>
      </tr>
      <tr>
        <td>Влад</td>
        <td>Занимаюсь Front end'ом</td>
        <td>Питер</td>
      </tr>
      <tr>
        <td>Андрей</td>
        <td>Back end разработчик</td>
        <td>Минск</td>
      </tr>
      <tr>
        <td>Максим</td>
        <td>Занимаюсь SEO оптимизацией</td>
        <td>Москва</td>
      </tr>
    </tbody>
  </table>

Но их можно улучшить под свои хотелки добавляя определенные классы.

Название классаЧто он делает
 table-stripedЧередует цвета строк
 table-borderedДобавляет ячейкам границы
 table-hoverИзменяет цвета строк при наведении
table-condensedУменьшает отступы ячеек
 Тут несколько классовИзменяет фон ячеек (смотрите внизу)
table-responsiveТаблица становиться адаптивной

Внизу находится подробная информация про каждый класс.

Чередование цвета строк


<table class = "table table-striped"> 
  ...
</table>

Этот эффект называют — зебра. Он добавляет серый цвет не четным строкам.

В Internet Explorer 8 и ниже вы не заметите никаких изменений (некоторые функции не используются).

Добавление границ


<table class = "table table-bordered"> 
  ...
</table>

У стандартной таблицы ячейки не имеют границ, поэтому нужно их самостоятельно добавлять.

Изменение цвета ячеек при наведении


<table class = "table table-hover"> 
  ...
</table>

При наведении на строки их фон будет становиться сероватым. Скажу сразу, увидеть хоть какие-то изменения сложно.

Компактные отступы


<table class = "table table-condensed"> 
  ...
</table>

Ячейки таблицы будут выглядеть меньше из-за уменьшения отступов (paddind). Так можно сделать таблицу компактнее, если мало места.

Фон ячеек

Bootstrap имеет пять стандартных фонов. Вы можете сделать тоже самое создав свой класс с background-color.

Название классаЧто он делает
activeИспользуется когда пользователь навел на строку или ячейку
warningПредупреждение, нужно обратить свое внимание
infoДополнительная информация
successУспешное выполнение
dangerЧто-то пошло неправильно

 

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


<div class = "table-responsive">
  <table class = "table">
    ...
  </table>
</div>

Таблица автоматически подстраивается под размер окна. Так если ширина окна не вмещает содержимое внизу появится горизонтальный скрол. На ширине больше таблица выглядит как обычно.

Добавление этого класса идет к блоку div, который является родительским для таблицы

Поделиться ссылкой:

Сделайте таблицу bootstrap прокручиваемой по вертикали и горизонтали с фиксированным заголовком

Как сделать таблицу bootstrap прокручиваемой по вертикали и горизонтали с фиксированным заголовком?

У меня есть одно решение, но есть некоторые ограничения , такие как:

  • Ширина th и td будет фиксирована
  • Высота стола будет фиксированной

Это решение находится здесь: JSFIDDLE

Я пытаюсь сделать таблицу с этими свойствами:

  • Отзывчивость(высота и ширина)
  • Динамическая ширина td и th
  • Вертикальная и горизонтальная прокрутка с фиксированной ‘thead’

С загрузочного стола, я сделал это…

table {
  border: 1px solid black;
  overflow-x: scroll;
  max-height: 350px;
}

td,
th {
  border: 1px solid black;
  width: 1%;
}

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 150px;
  overflow-y: scroll;
  width: 100%;
}
<div>
  <div>
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Примечание: несколько строк и столбцов, чтобы сделать его прокручиваемым.
В этой таблице,

  • Ширина td и th в одном столбце одинакова.
  • Ширина разных колонок не фиксирована.
  • Стол отзывчивый.

Единственная проблема с этой таблицей заключается в том, что заголовок не исправлен .
Я попробовал то, о чем упоминал в своем предыдущем посте. Предыдущее Сообщение

Как сделать «thead» фиксированной этой загрузочной таблицы с вертикальной и горизонтальной полосой прокрутки?

javascript

jquery

css

twitter-bootstrap

html-table

Поделиться

Источник


Rabinder Bisht    

18 января 2018 в 12:06

3 ответа


  • Выровняйте изображение по горизонтали и вертикали в прокручиваемом div

    А у вас есть изображение, и вы хотите иметь возможность увеличивать/уменьшать его масштаб в прокручиваемой области с фиксированным размером. Это легко, но если изображение меньше прокручиваемой области, оно должно быть центрировано как по вертикали, так и по горизонтали. Я не могу найти решение,…

  • css: таблица прокручивается как по горизонтали, так и по вертикали с фиксированным заголовком

    Как я могу реализовать таблицу, которая может прокручиваться как по горизонтали, так и по вертикали с фиксированным заголовком, используя css? Я нашел эту прокрутку div из внешнего div , но она реализована с помощью Javascript/Jquery. каким-либо образом реализовать ее с помощью только CSS?…



2

поместите таблицу в div, как показано ниже, чтобы сделать таблицу прокручиваемой.

<div> 
    <table>
    ...
    </table>
</div>

Поделиться


Iqbal Pratomo Santoso    

31 декабря 2018 в 09:23



1

Вы можете использовать css, чтобы сделать это с display: block.

Что-то вроде этого:

table tbody, table thead
{
    display: block;
}
table tbody 
{
   overflow: auto;
   height: 100px;
}

Смотрите пример здесь

Поделиться


Fernando Paz    

18 января 2018 в 12:26



0

Попробуйте это:

table {
    border-collapse: collapse;
    overflow-x: scroll;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
    overflow:hidden;
    text-overflow: ellipsis;
    max-width: 100px;

}
.container{
width:100%;
}
<div>
  <div>
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>

        </tr>
      </tbody>
    </table>
  </div>
</div>

Поделиться


BharathRao    

18 января 2018 в 13:14



Похожие вопросы:

Bootstrap как выровнять элементы по вертикали и горизонтали

Я хочу реализовать что-то отзывчивое, например страницу duckduckgo.com . У него есть логотип, литерал DuckDuckGo и окно поиска. Когда я сжимаю браузер до почти горизонтальной полосы, три компонента…

Добавить строку в таблицу HTML с фиксированным заголовком

У меня есть таблица HTML с фиксированным заголовком. Код, который я использовал для фиксированного заголовка, я нашел на Stack Overflow, и у меня есть ссылка в коде . NOTE: я нашел еще одну тему,…

HTML table прокрутка по вертикали и горизонтали

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

Выровняйте изображение по горизонтали и вертикали в прокручиваемом div

А у вас есть изображение, и вы хотите иметь возможность увеличивать/уменьшать его масштаб в прокручиваемой области с фиксированным размером. Это легко, но если изображение меньше прокручиваемой…

css: таблица прокручивается как по горизонтали, так и по вертикали с фиксированным заголовком

Как я могу реализовать таблицу, которая может прокручиваться как по горизонтали, так и по вертикали с фиксированным заголовком, используя css? Я нашел эту прокрутку div из внешнего div , но она…

Устранение неполадок, чтобы сделать таблицу прокручиваемой с фиксированным заголовком

Я создаю таблицу в своем проекте AngularJS и пытаюсь сделать ее прокручиваемой таблицей с фиксированным заголовком. Вот код HTML: <div class=container ng-app=sortApp…

Html table — вертикальный scroll с фиксированным заголовком

У меня есть таблица HTML со многими столбцами (даже 50 столбцов!). Я пытаюсь иметь возможность scroll по горизонтали (вся таблица) и по вертикали (с фиксированным заголовком). Все решения,…

Как настроить высоту таблицы bootstrap-vue и сделать ее прокручиваемой с фиксированным заголовком

У меня есть div с b-таблицей внутри него. Я хочу настроить высоту таблицы и сделать ее прокручиваемой с фиксированным заголовком. Пожалуйста, кто-нибудь, помогите. вот мой код. вот код внутри…

Как центрировать <h2> по вертикали и горизонтали с помощью bootstrap

Я хочу центрировать h2 по вертикали и горизонтали с помощью Bootstrap. На самом деле я пытался использовать Bootstrap flexbox, чтобы выровнять его по вертикали со свойством align-items-center ,…

центрируйте изображение по горизонтали и повторяйте по вертикали

Мне нужно показать изображение, центрированное по горизонтали, с повторением его по вертикали, чтобы покрыть высоту экрана. Я попробовал с этим: Center( child: Image.asset(‘test.png’, repeat:…

Bootstrap 4 таблица отзывчивая tbody scroll

Использование Bootstrap 4. У меня есть отзывчивая таблица, в которой я хотел бы сделать прокручиваемое тело. Стол выглядит так:

<div>
  <table>
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <!-- some rows -->
    </tbody>
  </table>

Чтобы прокрутить в tbody, я добавил в таблицу SCSS-класс .custom-table , он выглядит следующим образом

.custom-table {
  tbody {
     height: 50px;
     overflow-y: auto;
     width: 100%;
     display: block;
  }
}

Однако этот стиль работает неправильно. Все содержимое в tbody перемещается влево. У меня есть рабочий пример JSFiddle.
Что я сделал не так?

html

css

twitter-bootstrap

bootstrap-table

Поделиться

Источник


Peter    

17 января 2019 в 15:08

2 ответа


  • отзывчивая таблица с фиксированным столбцом

    Я уже писал об этом 7 месяцев назад, и кто-то был достаточно любезен, чтобы указать мне на правильное решение: bootstrap 3 отзывчивая таблица с фиксированным первым столбцом Однако это внезапно перестало работать, и фиксированный столбец больше не фиксируется. Чтобы увидеть его в действии,…

  • Отзывчивая таблица данных jQuery не работает во вкладках и модальном всплывающем окне bootstrap

    Я использовал отзывчивую таблицу данных jquery в своем проекте, я столкнулся с проблемой во вкладках и всплывающем окне Список проблем Отзывчивая таблица данных jquery не работает во вкладках, работает только на первой вкладке, а не на второй вкладке(символ плюс не входит в таблицу данных jquery)….



2

Пожалуйста, проверьте ниже, я предпочитаю использовать flexbox . Я также использую префиксы -webkit и -ms для большей кроссбраузерной совместимости

  tbody , thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  tr {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  th,td {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  tbody {
     height: 50px;
     overflow-y: auto;
  }

  thead {
    padding-right: 20px;
  }

Я установил padding-right в thead из-за полосы прокрутки на tbody .

Поделиться


Αntonis Papadakis    

17 января 2019 в 18:53



1

Тебе это не нравилось?

Измените свой css вот так

.custom-table> tbody {
    display:block;
    height:50px;
    overflow:auto;
}
.custom-table> thead, tbody tr {
    display:table;
    width:100%;         
}
.custom-table> thead {
    width:   100%   
}
.custom-table {
    width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <table>
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
      </tr>
      <tr>
        <td>text4</td>
        <td>text5</td>
        <td>text6</td>
      </tr>
      <tr>
        <td>text7</td>
        <td>text8</td>
        <td>text9</td>
      </tr>
    </tbody>
  </table>
</div>

Поделиться


Udara Kasun    

17 января 2019 в 16:00


Похожие вопросы:

CSS — таблица отзывчивая внутри display:table + display:table-row/cell

В настоящее время я работаю над проектом с компанией, где нам нужно отобразить данные в таблице. Некоторые запросы извлекают так много полей, что выходная таблица быстро переполняется. Проблема в…

Таблица tbody scroll в IE8

В своем проекте я пытаюсь сделать прокрутку tbody в IE8. Я знаю ,что его можно прокрутить, просто дав от overflow: auto до tbody . Но это не работает в IE8. Чтобы заставить его работать в IE8, tbody…

Прокручиваемая Таблица Tbody

У меня есть таблица с динамически генерируемыми данными. Из-за ограничения пространства мне нужно уметь прокручивать тело. Мой стол выглядит так: <table> <thead> <! — This thead…

отзывчивая таблица с фиксированным столбцом

Я уже писал об этом 7 месяцев назад, и кто-то был достаточно любезен, чтобы указать мне на правильное решение: bootstrap 3 отзывчивая таблица с фиксированным первым столбцом Однако это внезапно…

Отзывчивая таблица данных jQuery не работает во вкладках и модальном всплывающем окне bootstrap

Я использовал отзывчивую таблицу данных jquery в своем проекте, я столкнулся с проблемой во вкладках и всплывающем окне Список проблем Отзывчивая таблица данных jquery не работает во вкладках,…

Bootstrap 4 таблица отзывчивая, горизонтальная и вертикальная прокрутка

Я использую bootstrap таблицы с Angular 6 в проекте, и мне удалось создать вертикальное тело таблицы прокрутки с помощью этого кода: <table class=table table-striped table-bordered…

таблица-отзывчивая в bootstrap 4 не работает

я новичок, который только начал я попробовал следующее видео создания форума с использованием bootstrap 4 в youtube но table-responsive не работает я думаю, что мой код такой же, как в видео, но…

Bootstrap 4 таблица tbody spinner неправильное положение в chrome и Интернете explorer

Я хочу создать динамически spinner в таблице tbody bootstrap 4. Я уже пробовал этот путь: HTML <div class=container mt-2> <div class=card> <div class=card-body> <div…

Bootstrap 4 отзывчивая таблица с шириной столбца

У меня есть отзывчивый стол bootstrap 4. и у меня есть этот взгляд на ПК. и код такой <table class=table table-bordered m-table m-table—border-metal m-table—head-bg-primary style=table-layout:…

Bootstrap 4 вложенная отзывчивая таблица

Я использую Bootstrap 4. У меня есть таблица внутри таблицы,на которую я хотел бы реагировать. На самом деле все это одна таблица, но я хочу, чтобы прокручивался только второй столбец и далее….

Оформляем таблицы с Bootstrap | Vaden Pro

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

Если у Вас нет желания уделять внимание оформлению таблиц, то воспользоваться для этой цели Bootstrap будет весьма рациональным выбором.

Предположим мы уже создали обычную таблицу:

<table>
   <thead>
      <tr>
         <td>Ниша</td>
         <td>Конверсия, %</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Товары для детей</td>
         <td>3,21</td>
      </tr>
      <tr>
         <td>Парфюмерия и косметика</td>
         <td>2,94</td>
      </tr>
      <tr>
         <td>Магазины продажи товаров различных групп</td>
         <td>1,76</td>
      </tr>
   </tbody>
</table>

И на данном этапе без оформления она у нас выглядит следующим образом:

Вот и пришло время прибегнуть к помощи нашего CSS фреймфорка.

Стандартное оформление таблицы

Для того, чтобы подключить Bootstrap оформление к созданной нами таблице в самом минимальном варианте необходимо присвоить тегу table соответствующий класс:

После внесения данных изменений в код таблица примет следующий вид:

Как мы видим, во-первых она расширилась до размеров родительского контейнера, во-вторых у ячеек появились отступы, изменился шрифт, в-третьих появились разделители между строками.

В целом минимальные требования к оформлению уже выполнены, но мы можем продолжить стилизовать таблицу доводя ее до необходимой нам кондиции.

Таблица с чередующимися строками

Добавляя к table класс .table-striped мы получаем из нашей заготовки симпотичную табличку с чередующимися фонами у строк:

На всякий случай уточню, что в этом случае в код внесены следующие изменения:

<table>

Таблица с границами

Если на чем-то не устраивает отсутствие вертикальных границ и охота получить просто обычную таблицу с нормальными отступами, то стоит воспользоваться классом .table-bordered.

В результате следующего сочетания:

<table>

Получим:

Реагирующие на наведение строки

Чтобы добавить динамичности, да и в целом удобства в обращении с таблицей (лично мне удобнее читать информацию, когда текущая строка подсвечивается), можно воспользоваться классом .table-hover. Он изменяет цвет строки на которую наведен курсор мыши.

<table>

Компактный вариант

Если кому-то не нравятся слишком большие отступы до границ ячеек или же просто следует уместить больше информации в ограниченном пространстве, то на выручку приходит класс .table-condensed

<table>

Ячейки и строки с заданными фонами

При желании мы можем менять фоны у строк и ячеек по своему усмотрению.

Для этого соответствующих тегов (tr, td) можно присваивать классы добавляющие им цвета.

В нашем распоряжении имеется 5 таких классов:

  • .active – сероватый фон, цвет используется тот же, что у активных строк в случае применения к таблице класса .table-hover
  • .success – приятный салатный цвет фона
  • .info – нейтральный, голубоватый оттенок цвета
  • .warning – пастельный желтый цвет
  • .danger – фон в красных тонах призванный обращать на себя внимание

Чтобы не запутаться давайте доработаем наш исходный код с применением данных классов:

<table>
   <thead>
      <tr>
         <td>Ниша</td>
         <td>Конверсия, %</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Товары для детей</td>
         <td>3,21</td>
      </tr>
      <tr>
         <td>Парфюмерия и косметика</td>
         <td>2,94</td>
      </tr>
      <tr>
         <td>Магазины продажи товаров различных групп</td>
         <td>1,76</td>
      </tr>
   </tbody>
</table>

ОБРАТИТЕ ВНИМАНИЕ!

Даже когда мы не добавляем ничего к самому тегу table, должен в нем присутствовать, чтобы корректно работали все остальные.

В результате проделанных манипуляций у нас выйдет следующая картина:

«Отзывчивые» таблицы

Разработчики Bootstrap позаботились о удобстве создания мобильных версий сайтов. Так появились классы делающие элементы дизайна «отзывчивыми».

В случае таблиц это класс .table-responsive, который присваивается РОДИТЕЛЬСКОМУ для table тегу:

<div>
   <table>
      содержимое
   </table> 
</div>

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

Комбинирование классов

Вот мы и перечислили все основные инструменты для стилизации таблиц. Как обычно, для получения наилучшего решения, мы спокойно можем комбинировать классы:

<table>

Ну а уникальные штрихи можно добавить уже воспользовавшись своим файлом CSS.

Если вы еще не знакомы тесно с Bootstrap, то о прочих возможностях данного фреймворка можно узнать во вводном уроке курса.

Оценок: 13 (средняя 3.3 из 5)

  • 21720 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Web-разработка • HTML и CSS


Для стилизации таблиц предназначены классы table, table-striped, table-bordered, table-hover, table-condensed. Для выделения строки или ячейки таблицы можно использовать классы active, info, success, warning, danger. Для создания адаптивной таблицы предназначен класс table-responsive.


Простая таблица:

<table>
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Сергей</td>
            <td>Иванов</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Николай</td>
            <td>Петров</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Дмитрий</td>
            <td>Сергеев</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>



Для выделения нечётных строк основной части таблицы:

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



Добавить границы для всех ячеек таблицы:

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



Подсвечивание строк при наведении курсора:

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



Сделать таблицу более компактной:

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



Выделить строку или ячейку цветом:

<table>
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Сергей</td>
            <td>Иванов</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Николай</td>
            <td>Петров</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Дмитрий</td>
            <td>Сергеев</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>



Создание адаптивной таблицы:

<div>
    <table>
        ..........
    </table>
</div>

Поиск:
CSS • HTML • Web-разработка • Верстка • Форма • Таблица • Table • Bootstrap • Фреймворк

Бутстрап — Таблицы

Bootstrap обеспечивает чистый макет для построения таблиц. Некоторые элементы таблицы, поддерживаемые Bootstrap, — это:


ТегОписание
tableЭлемент упаковки для отображения данных в табличном формате
theadЭлемент контейнера для строк заголовка таблицы (tr) для маркировки столбцов таблицы.
tbodyКонтейнерный элемент для строк таблицы (tr) в теле таблицы.
trЭлемент контейнера для набора ячеек таблицы (td или th), который отображается в одной строке.
tdЯчейка таблицы по умолчанию.
thСпециальная ячейка таблицы для меток столбцов (или строк, в зависимости от области и размещения). Должен использоваться в td
captionОписание или краткое изложение таблицы.

Основная таблица

Если вам нужен приятный базовый стиль таблицы с небольшим заполнением и горизонтальными разделителями, добавьте базовый класс .table в любую таблицу, как показано в следующем примере —


<table class = "table">
   <caption>Basic Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
           
</table>

Посмотреть результат

Дополнительные классы таблиц

Наряду с разметкой базовой таблицы и классом .table есть несколько дополнительных классов, которые можно использовать для создания разметки. В следующих разделах вы сможете увидеть все эти классы.

Полосатая таблица

Добавив класс .table-striped, вы получите полосы в строках в tbody, как показано в следующем примере —table class = "table table-striped"


   <caption>Striped Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
     
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
  
</table>

Посмотреть результат

Граничная таблица

Добавляя класс table-bordered, вы получите границы вокруг каждого элемента и закругленные углы вокруг всей таблицы, как показано в следующем примере —


<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
     
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
           
</table>

Посмотреть результат

Таблицы для наведения

Добавив класс .table-hover, светло-серый фон будет добавлен к строкам, в то время как курсор будет парить над ними, как показано в следующем примере —


<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
     
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
  
</table>

Посмотреть результат

Сжатая таблица

Добавляя класс table-condensed, добавление строки сокращается наполовину, чтобы уплотнить таблицу, как показано в следующем примере. Это полезно, если вы хотите получить более плотную информацию.


<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

Посмотреть результат

Контекстные классы

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


КлассОписание
.activeПрименяет цвет наведения к определенной строке или ячейке
.successУказывает на успешное или позитивное действие
.warningУказывает предупреждение, которое может потребовать внимания
.dangerУказывает на опасное или потенциально негативное действие

Эти классы могут применяться к tr, td или th.Например так — table class = "table"


   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
   
</table>

Посмотреть результат

Отзывчивые или адаптирующиеся таблицы

Обернув любой класс .table в .table-responsive, вы заставите таблицу прокручиваться горизонтально на небольших устройствах (до 768px). При просмотре на большом, чем 768 пикселей экране, вы не увидите различий в этих таблицах.


<div class = "table-responsive">
   <table class = "table">
      
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
      
   </table>
</div>              

Посмотреть результат

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Введение · Таблица начальной загрузки

Обзор Bootstrap Table, способы загрузки и использования, основные шаблоны и многое другое.

Быстрый старт

Хотите быстро добавить Bootstrap Table в свой проект Bootstrap v4? Используйте CDN, бесплатно предоставляемый сотрудниками UNPKG. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в ваш перед всеми другими таблицами стилей для загрузки нашего CSS.

    

JS

Поместите следующие

Начальный шаблон

Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки.Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования.

Для Bootstrap v4 мы используем Font Awesome в качестве значков по умолчанию, поэтому необходимо импортировать ссылку Font Awesome.

Сложите все вместе, и ваши страницы должны выглядеть так:

  

  
    
    
    
     Привет, таблица начальной загрузки! 

    
  
    
Идентификатор позиции Название предмета Цена предмета
1 Пункт 1 1 доллар
2 Пункт 2 2 доллара

Тип документа HTML5

Bootstrap Table требует использования документа типа HTML5.Без него вы увидите несколько забавных незавершенных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.

  

  ...
  

Будьте в курсе разработки Bootstrap Table и обращайтесь к сообществу с помощью этих полезных ресурсов.

Примеры таблиц начальной загрузки

Перейти к основному содержанию

  • Дом
  • Документация

  • Темы

  • Примеры

  • Онлайн редактор

  • Новости

  • Блог

  • Bootstrap v4
    Bootstrap v5
    Bootstrap v3
    Таблица начальной загрузки
    Семантический интерфейс
    Бульма
    Материализовать
    Фонд

  • GitHub
  • Твиттер
  • Открытый коллектив

Скачать

Поиск по Algolia

Меню

Добро пожаловать

  • Индекс
  • Из HTML
  • Из данных
  • С URL
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Модальный стол
  • Столбцы группы
  • Дополнительная таблица
  • Несколько таблиц
  • Плоский Json
  • Большие данные
  • Компонент Vue

Параметры

  • AJAX
  • Опции AJAX
  • Основные колонны
  • Пользовательские кнопки
  • Кнопки выравниваются
  • Кнопки класса
  • Кнопки Заказать
  • Префикс кнопок
  • Панель инструментов кнопок
  • Кэш
  • Просмотр карты
  • Заголовок флажка
  • Классы
  • Нажмите, чтобы выбрать
  • Пагинация на стороне клиента
  • Колонны
  • Поиск столбцов
  • Столбцы Переключить все
  • Тип содержимого
  • Пользовательский поиск
  • Пользовательская сортировка
  • Пользовательская панель инструментов
  • Тип данных
  • Детальный фильтр
  • Детальный вид
  • Детальный вид Выровнять
  • Значок детального просмотра
  • Побег
  • Поле нижнего колонтитула
  • Параметры фильтра
  • Стиль нижнего колонтитула
  • Стиль заголовка
  • Высота
  • Размер значка
  • Префикс значков
  • Поле идентификатора
  • Игнорировать Щелкните для выбора на
  • Большие колонны
  • Язык
  • Размер загружаемого шрифта
  • Загрузка шаблона
  • Ведение метаданных
  • Метод
  • Минимальное количество столбцов
  • Ряд с множественным выбором
  • Список страниц
  • Номер страницы
  • Размер страницы
  • Разбиение на страницы
  • Пагинация по горизонтали
  • Индексный номер страницы
  • Цикл разбиения на страницы
  • Части нумерации страниц
  • Разбиение на страницы текста
  • Пагинация по вертикали
  • Параметры запроса
  • Тип параметров запроса
  • Помните приказ
  • Обработчик ответа
  • Атрибуты строки
  • Стиль строк
  • Поиск
  • Нейтрализация с акцентом на поиск
  • Поиск Выровнять
  • Выделение поиска
  • Поиск при клавише ввода
  • Селектор поиска
  • Текст поиска
  • Истекло время поиска
  • Пагинация на стороне сервера
  • Сортировка сервера
  • Показать значок кнопки
  • Показать текст кнопки
  • Показать расширенную пагинацию
  • Показать нижний колонтитул
  • Показать полноэкранный режим
  • Показать заголовок
  • Показать переключатель разбивки на страницы
  • Показать Обновить
  • Показать кнопку поиска
  • Показать кнопку очистки поиска
  • Показать переключатель
  • Бесшумная сортировка
  • Однократный выбор
  • Умный дисплей
  • Класс сортировки
  • Сортировать по названию Порядок
  • Сортировка Сброс
  • Стабильная сортировка
  • Сортируемый
  • Строгий обыск
  • Табличные иконки
  • Классы Thead
  • Выровнять панель инструментов
  • Всего не отфильтрованное поле
  • Итого / Поле данных
  • Обрезка при поиске
  • Неопределенный текст
  • Видимый поиск

Параметры столбца

  • Выравнивающие колонны
  • Выравнивание нижнего колонтитула
  • Видимая карта
  • Тип ячейки
  • Флажок
  • Флажок отключен
  • Флажок установлен
  • Класс
  • Нажмите, чтобы выбрать
  • Модуль форматирования деталей
  • Побег
  • События
  • Поля
  • Программа форматирования нижнего колонтитула
  • Форматирование
  • Естественная сортировка
  • Радио
  • Рядный Колспан
  • Программа форматирования поиска
  • Форматирование выделенного фрагмента поиска
  • Доступен для поиска
  • Показать Выбрать заголовок
  • Сортировать по названию Порядок
  • Сортируемый
  • Сортировщик
  • переключаемый
  • Название
  • Подсказка к заголовку
  • видимый
  • Ширина
  • Блок ширины

Методы

  • Приложение
  • Обратный чек
  • Отметить / снять отметку
  • Отметить / Снять все отметки
  • Отметить / снять отметку с
  • Уничтожить
  • Развернуть / свернуть все строки
  • Развернуть / свернуть строку по uniqueId
  • Развернуть / свернуть строку
  • Фильтр по
  • Получить данные
  • Получить скрытые строки
  • Получить параметры
  • Получить строку по уникальному идентификатору
  • Получить позицию прокрутки
  • Получить выбор
  • Получить видимые / скрытые столбцы
  • Вставить строку
  • Нагрузка
  • Объединить ячейки
  • Подготовить
  • Обновить
  • Параметры обновления
  • Удалить
  • Удалить все
  • Удалить с помощью уникального идентификатора
  • Сбросить поиск
  • Сбросить вид
  • Прокрутите до
  • Выбрать / Предыдущая / Следующая страница
  • Показать / скрыть все столбцы
  • Показать / скрыть столбец
  • Показать / скрыть загрузку
  • Показать / скрыть строку
  • Переключить детальный вид
  • Переключить на полноэкранный режим
  • Переключить пагинацию
  • Переключить вид
  • Обновление по уникальному идентификатору
  • Обновить ячейку
  • Обновить ячейку по уникальному идентификатору
  • Обновить заголовок столбца
  • Обновить текст формата
  • Обновить строку

Расширения

  • Адрес
  • Автообновление
  • Печенье
  • Копировать строки
  • Пользовательский вид
  • Defer Url
  • Редактируемый
  • Экспорт
  • Контроль фильтра
  • Фиксированные колонны
  • Группировать по V2
  • I18n Улучшение
  • Ключевые события
  • мобильный
  • Множественная сортировка
  • Перейти на страницу
  • Трубопровод
  • Печать
  • Изменить порядок столбцов
  • Изменить порядок строк
  • Изменяемый размер
  • Закрепленный заголовок
  • Панель инструментов
  • Сетка деревьев

Проблемы

  • 137.Обновить с URL-адреса после использования параметра данных

  • 152. Как передать параметр на сервер

  • 177. Множественные поля в столбце.

  • 188. Показать только кнопку экспорта.

  • 220.Скрыть столбец состояния

  • 221. Используйте cellStyle.

  • 283. Используйте resetView, чтобы сбросить ширину заголовка.

  • 337. Пользовательские значки шрифтов.

  • 371. Использование содержимого таблицы в HTML-форме.

  • 383.Используйте Flat UI для стилизации флажков

  • 386. Переопределить переменные queryParam по умолчанию.

  • 395. Включение / отключение кнопки удаления при нажатии флажка.

  • 406. Совместите панель инструментов и поле поиска.

  • 409.Обновить метод с новым URL

  • 415. Получить проверенный индекс строки.

  • 424. Переключить пагинацию

  • 431. Загрузить данные разбивки на страницы.

  • 457. Установите глобальные значения по умолчанию для таблицы.

  • 563.Изменить цвет фона в выбранных строках

  • 579. Показать средство форматирования изображений.

  • 639. Проблема изменения размера нижнего колонтитула.

  • 917. Оставить выбранным на стороне сервера.

  • 986.Редактируемое поле выбора

  • 987. Сохраните данные строки с помощью ввода.

  • 1167. Отметить / снять отметку Все на странице со стороны клиента.

  • 2211. Повернутые заголовки столбцов таблицы.

  • 2619.Нажмите кнопку сортировки с помощью флажка html

  • 3345. Отметить / снять отметку Все на странице со стороны сервера.

  • 3784. Заменить полосу прокрутки таблицы.

  • 3830. Экспорт всех записей с разбивкой на страницы на стороне сервера.

  • 3949.Множественный заголовок группы и большие столбцы

  • 4210. Получить полный URL таблицы

  • 4214. Добавлено поле индекса.

  • 4586. Настроить атрибут данных td.

Примеры GitHub

React-Bootstrap · Документация по React-Bootstrap

Используйте свойства с полосами , с границами и hover для настройки таблицы.

<Стол с полосатой окантовкой при наведении>

# Имя Фамилия Имя пользователя 1 Отметить Отто @mdo 2 Джейкоб Торнтон @fat 3 Птица Ларри @twitter

Small Таблица №

Используйте size = "sm" , чтобы сделать таблицы компактными, вырезав заполнение ячеек i. п половина.

<Таблица с полосами и границами при наведении указателя мыши = "sm">

# Имя Фамилия Имя пользователя 1 Отметить Отто @mdo 2 Джейкоб Торнтон @fat 3 Птица Ларри @twitter

Темный стол #

Используйте option = "dark" , чтобы инвертировать цвета таблицы. и получите светлый текст на темном фоне.

<Таблица с полосами и краями при наведении курсора = "dark">

# Имя Фамилия Имя пользователя 1 Отметить Отто @mdo 2 Джейкоб Торнтон @fat 3 Птица Ларри @twitter

Адаптивный #

Адаптивный таблицы позволяют прокручивать таблицы по горизонтали с h легкость.

Always Responsive #

Для каждой точки останова используйте response для горизонтальной прокрутки таблиц. Адаптивные таблицы автоматически упаковываются в div . В следующем примере 12 столбцов с возможностью горизонтальной прокрутки.

<Таблица реагирует>

#

{Array.from ({length: 12}). Map ((_, index) => (

Заголовок таблицы

))}
1

{Множество.из ({length: 12}). map ((_, index) => (

Ячейка таблицы {index}

))}
2

{Array.from ({length: 12}). Map ((_, index) => (

Ячейка таблицы {index}

))}
3

{Array.from ({length: 12}). Map ((_, index) => (

Ячейка таблицы {index}

))}

Для конкретной точки останова #

Используйте responseive = "sm" , responsive = «md» , Response = "lg" или responseive = "xl" по мере необходимости для создания отзывчивых таблиц до определенной точки останова.С этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

API #

import Table from 'react-bootstrap / Table' Скопировать код импорта для компонента Table

.

.

Имя Тип По умолчанию Описание
с рамкой

логический

Добавляет границы со всех сторон таблицы и ячеек.

без полей

boolean

Удаляет все границы таблицы и ячеек, включая заголовок таблицы.

hover

boolean

Включить состояние наведения курсора на строки таблицы в пределах

отзывчивый

логический | строка

Адаптивные таблицы позволяют легко прокручивать таблицы по горизонтали.Для каждой точки останова используйте отзывчивый для горизонтального
прокрутка таблиц. Адаптивные таблицы автоматически упаковываются в div .
Используйте responseive = "sm" , responseive = "md" , responseive = "lg" или
responseive = "xl" по мере необходимости для создания адаптивных таблиц до
конкретная точка останова. С этой точки останова и выше таблица будет
вести себя нормально и не прокручивать по горизонтали.

размер

строка

Сделайте таблицы более компактными, разрезав заполнение ячеек пополам, установив
размер как см .

полосатый

логический

Добавляет полосатую полосу зебры в любую строку таблицы в пределах

вариант

строка

Инвертировать цвета таблицы - светлый текст на темном фоне
установив вариант как темный .

bsPrefix

строка

'table'

Измените имя базового класса CSS базового компонента и префикс имен классов модификаторов. Это аварийный люк для работы с сильно настроенными бутстраповыми CSS.

wenzhixin / bootstrap-table: расширенная таблица для интеграции с некоторыми из наиболее широко используемых фреймворков CSS. (Поддерживает Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)

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

Для начала проверьте:

Список жертвователей

ЛИЦЕНЗИЯ

ПРИМЕЧАНИЕ. Bootstrap Table находится под лицензией MIT License.Абсолютно бесплатный, вы можете произвольно использовать и изменять этот плагин. Если этот плагин вам полезен, вы можете Star в этом репо, ваша поддержка - моя самая большая движущая сила, спасибо.

Характеристики

  • Создано для Twitter Bootstrap (поддерживаются все версии)
  • Адаптивный веб-дизайн
  • Прокручиваемая таблица с фиксированными заголовками
  • Полностью настраиваемый
  • Через атрибуты данных
  • Показать / скрыть столбцы
  • Показать / скрыть заголовки
  • Показать / скрыть нижние колонтитулы
  • Получить данные в формате JSON с помощью AJAX
  • Простая сортировка столбцов одним щелчком мыши
  • Форматный столбец
  • Выбор одной или нескольких строк
  • Мощная разбивка на страницы
  • Просмотр карты
  • Детальный вид
  • Локализация
  • Расширения

Как получить

Ручная загрузка

Используйте страницу релизов или источник.

Беседка

  bower установка bootstrap-table
  

Нм

  npm установить загрузочную таблицу
  

CDN

Вы можете получить исходную таблицу начальной загрузки прямо из CDN, например CDNJS, bootcss или jsdelivr.

Участие

Для запросов функций, отчетов об ошибках или отправки запросов на вытягивание, пожалуйста, сначала прочтите CONTRIBUTING.md.

Проблемы с отчетами

Как указано выше, прочтите ДОПОЛНИТЕЛЬНО.md, особенно отчеты об ошибках

И как там указано, пожалуйста, предоставьте онлайн-пример при создании проблем!

Это действительно экономит много времени.

Вы также можете использовать наш шаблон примеров, нажав кнопку Загрузить примеры:

Онлайн-редактор

Ваш отзыв очень важен!

Благодарности

Спасибо всем, кто оставил отзыв и отправил запросы на включение. Список всех участников можно найти здесь.
Этот проект существует благодаря всем людям, которые вносят свой вклад.[Делать вклад].

История выпусков

Посмотрите журнал изменений

Местная разработка

Чтобы разработать локальную загрузочную таблицу, запустите:

 mkdir bootstrap-table-dev
cd bootstrap-table-dev
git clone https://github.com/wenzhixin/bootstrap-table
git clone https://github.com/wenzhixin/bootstrap-table-examples

пряжа добавить http-сервер
npx http-сервер 

А затем откройте: http: // localhost: 8081 / bootstrap-table-examples

Локальная сборка

Чтобы создать локальную загрузочную таблицу, выполните:

Результат появится в каталоге dist .

Спонсоры PayPal

Спонсоры OpenCollective

Поддержите этот проект, став спонсором. Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Поддерживающие OpenCollective

Поддержите этот проект, став спонсором. Ваше изображение появится здесь со ссылкой на ваш сайт. [Стать спонсором]

Таблица начальной загрузки - SPGuides

В этом руководстве по начальной загрузке мы обсудим историю начальной загрузки.Как мы можем создать стильный стол, такой как темный стол с подвешиванием, стол без границ, стол с полосатыми рядами и т. Д. На примере.

Ранее мы создавали таблицы с использованием HTML со строками и столбцами. Но Bootstrap 4 предоставляет некоторые из предопределенных классов для таблиц. Так что мы можем очень легко создать адаптивную и стилизованную таблицу с очень меньшими затратами времени.

Если вы новичок в начальной загрузке, ознакомьтесь с учебником Bootstrap.

Таблица начальной загрузки

Мы начнем наше руководство по Bootstrap с очень простой таблицы, которая имеет один заголовок, 7 столбцов и 4 строки.

Внутри класса контейнера я сначала добавил класс таблицы. Для заголовка таблицы я добавил тег

. Внутри

добавлен

, затем добавлен 7

для заголовка. Элемент таблицы может быть добавлен внутри

, который присутствует внутри

. Тег

содержит

.

  


 
  
  
  
  
  


Пример базовой таблицы Bootstrap

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 100000 Серебро Среднее Электроника Sony 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

базовая таблица начальной загрузки

Bootstrap 4-полосная таблица с удаленными строками

Для создания таблицы строк с разделением на Bootstrap 4 нам нужно добавить класс «с полосой таблицы» с таблицей базового класса.

  


 
  
  
  
  
  


Bootstrap4 Stripped Row Table

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 100000 Серебро Среднее Электроника Sony 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

бутстрап 4 полосатых ряда

Bootstrap 4 Таблица с границами

Используя Bootstrap 4, мы можем создать таблицу с границами, используя предоставленный класс начальной загрузки с границами таблицы.Нам нужно писать с таблицей базового класса.

  


 
  
  
  
  
  


Таблица Bootstrap4 с границами

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 100000 Серебро Среднее Электроника Sony 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

граница таблицы bootstrap 4

Bootstrap 4 Таблица границ строк при наведении

Для таблицы Hover row нам нужно добавить table-hover с базовым классом таблицы.Здесь я добавил класс границы (с границей таблицы) внутри класса таблицы.

  


 
  
  
  
  
  


Bootstrap4 Hover Rows with Border

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

bootstrap 4 строки при наведении

Bootstrap 4 Темный или черный стол

Используя класс table-dark, мы можем создать темную таблицу в начальной загрузке.Как и другие классы, этот класс также необходимо добавить в базовый класс таблицы.

  


 
  
  
  
  
  


Темная таблица Bootstrap4

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

bootstrap 4 темный стол

Bootstrap 4 Темный стол в полоску

Bootstrap 4, мы можем создать темную таблицу с полосой, используя класс table-striped и table-dark с базовым классом таблицы.

  


 
  
  
  
  
  


Темная таблица Bootstrap4 с полосами

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

темный стол в bootstrap 4

Bootstrap 4 Hover Row Dark Table

Для таблицы Bootstrap 4 Hover Row Dark нам нужно добавить класс table-dark table-hover внутри базового класса таблицы.

  


 
  
  
  
  
  


Bootstrap4 Hover Row Dark Table

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

строка таблицы при наведении курсора начальной загрузки

Bootstrap 4 Таблица без границ

Чтобы создать таблицу без полей в начальной загрузке, нам нужно добавить класс «без границ» с базовым классом таблицы.

  


 
  
  
  
  
  


Таблица Bootstrap4 без полей

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung

bootstrap 4 таблица без полей

Bootstrap 4 создает таблицу с использованием контекстных классов

Мы можем создать таблицу Bootstrap разного цвета, используя различные контекстные классы, которые предоставляет bootstrap.

  


 
  
  
  
  
  


Создание таблицы Bootstrap 4 с использованием контекстных классов

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung 5 Планшет 7000 Розовый Хорошо Электроника Lenovo 6 Сумка для ноутбука 1200 Черный Хорошо Сумка и багаж Небо 7 Куртка 5000 Серый Очень хорошо Одежда Зара 8 Мобильный 10000 Красный Очень хорошо Электроника Samsung 9 Мобильный 10000 Красный Очень хорошо Электроника Samsung 10 Мобильный 10000 Красный Очень хорошо Электроника Samsung

bootstrap 4 создать таблицу

Чтобы задать цвет заголовка в таблице Bootstrap 4, нам нужно добавить класс «thead-dark» внутри тега

.

  


 
  
  
  
  
  


Таблица Bootstrap 4 с цветом заголовка

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung 5 Планшет 7000 Розовый Хорошо Электроника Lenovo 6 Сумка для ноутбука 1200 Черный Хорошо Сумка и багаж Небо 7 Куртка 5000 Серый Очень хорошо Одежда Зара 8 Мобильный 10000 Красный Очень хорошо Электроника Samsung 9 Мобильный 10000 Красный Очень хорошо Электроника Samsung 10 Мобильный 10000 Красный Очень хорошо Электроника Samsung

таблица bootstrap 4 thead color

Bootstrap 4 Create Small Table

В Bootstrap 4 для создания небольшой таблицы нам нужно использовать класс table-sm с базовым классом таблицы.Здесь я также добавил класс «с границами таблицы» для целей границы таблицы.

  


 
  
  
  
  
  


Маленькая таблица Bootstrap 4

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд 1 Ноутбук 70000 Синий Очень хорошо Электроника LG 2 телевизор 100000 Серебро Среднее Электроника Sony 3 телевизор 30000 черный очень хорошо Электроника Панасоника 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung 5 Планшет 7000 Розовый Хорошо Электроника Lenovo 6 Сумка для ноутбука 1200 Черный Хорошо Сумка и багаж Небо 7 Куртка 5000 Серый Очень хорошо Одежда Зара 8 Мобильный 10000 Красный Очень хорошо Электроника Samsung 9 Мобильный 10000 Красный Очень хорошо Электроника Samsung 10 Мобильный 10000 Красный Очень хорошо Электроника Samsung

bootstrap 4 небольшой стол

Bootstrap 4 Добавить заголовок для таблицы

Мы можем добавить заголовок в нашу таблицу Bootstrap 4, используя тег.

  


 
  
  
  
  
  


Bootstrap 4 Добавить заголовок в таблицу

<таблица> Список сведений о продукте SLNo ProductName Цена Цвет Обзор Категории Бренд ProductNumber Акция 1 Ноутбук 70000 Синий Очень хорошо Электроника LG LPG100 Нет в наличии 2 телевизор 100000 Серебро Среднее Электроника Sony TVS100 Доступно 3 телевизор 30000 черный очень хорошо Электроника Панасоника TVE100 Доступно 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung 600 МБ Доступно 5 Планшет 7000 Розовый Хорошо Электроника Lenovo TBE OutOfStock 6 Сумка для ноутбука 1200 Черный Хорошо Сумка и багаж Небо BGS003 Доступно

заголовок таблицы bootstrap 4

Bootstrap 4 Создать адаптивную таблицу

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

  


 
  
  
  
  
  


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

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд Описание ProductNumber Акция 1 Ноутбук 70000 Синий Очень хорошо Электроника LG Продукт занял очень хорошие позиции на рынке LPG100 Нет в наличии 2 телевизор 100000 Серебро Среднее Электроника Sony Вам следует попробовать продукт один раз.Теперь у IT-компаний скидка 50% на рынке TVS100 Доступно 3 телевизор 30000 черный очень хорошо Электроника Панасоника Вам следует попробовать продукт один раз. Теперь у IT-компаний скидка 50% на рынке TVE100 Доступно 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung Вам следует попробовать продукт один раз.Теперь у IT-компаний скидка 50% на рынке 600 МБ Доступно 5 Планшет 7000 Розовый Хорошо Электроника Lenovo Вам следует попробовать продукт один раз. Теперь у IT-компаний скидка 50% на рынке TBE OutOfStock 6 Сумка для ноутбука 1200 Черный Хорошо Сумка и багаж Небо Теперь у ИТ-отдела скидка 30% на рынке BGS003 Доступно

Когда мы открыли нашу адаптивную таблицу Bootstrap 4 в большой системе с шириной экрана более 992 пикселей, возможность прокрутки не появляется.

bootstrap 4 адаптивная таблица

Но в маленькой системе, ширина экрана которой меньше 992 пикселей, появится возможность прокрутки.

пример адаптивной таблицы начальной загрузки

В таблице Bootstrap 4 мы можем добавить точку останова.

Предопределенный класс для BreakPOint Ширина экрана
table-responseive-sm <576 пикселей
table-responseive-md <768 пикселей
table-responseive-lg <992 пикселей
table-responseive-xl <1200 пикселей
  


 
  
  
  
  
  


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

<таблица> SLNo ProductName Цена Цвет Обзор Категории Бренд Описание ProductNumber Акция 1 Ноутбук 70000 Синий Очень хорошо Электроника LG Продукт занял очень хорошие позиции на рынке LPG100 Нет в наличии 2 телевизор 100000 Серебро Среднее Электроника Sony Вам следует попробовать продукт один раз.Теперь у IT-компаний скидка 50% на рынке TVS100 Доступно 3 телевизор 30000 черный очень хорошо Электроника Панасоника Вам следует попробовать продукт один раз. Теперь у IT-компаний скидка 50% на рынке TVE100 Доступно 4 Мобильный 10000 Красный Очень хорошо Электроника Samsung Вам следует попробовать продукт один раз.Теперь у IT-компаний скидка 50% на рынке 600 МБ Доступно 5 Планшет 7000 Розовый Хорошо Электроника Lenovo Вам следует попробовать продукт один раз. Теперь у IT-компаний скидка 50% на рынке TBE OutOfStock 6 Сумка для ноутбука 1200 Черный Хорошо Сумка и багаж Небо Теперь у ИТ-отдела скидка 30% на рынке BGS003 Доступно

отзывчивая таблица в начальной загрузке

Вам могут понравиться следующие руководства по начальной загрузке:

В этой статье Bootstrap 4 мы обсуждали разные таблицы Bootstrap 4 с использованием разных предопределенных классов.

Всем привет !! Я Бхавана, MVP по SharePoint и имею более чем 10-летний опыт работы с SharePoint, а также с технологиями .Net. Я работал со всеми версиями SharePoint от wss до Office 365. Я хорошо знаком с настройкой и миграцией с помощью инструментов Nintex, Metalogix. Теперь изучаю больше в SharePoint 2016 🙂 Надеюсь, здесь я смогу внести свой вклад и в полной мере поделиться своими знаниями. Я считаю, что «Нет богатства, как знания, и нет бедности, как невежество»

Как сделать таблицу Bootstrap с липкой головкой таблицы?

< html lang = "en" >

< голова >

0003 < meta charset = "UTF-8" />

< meta name = "viewport" content = "ширина = ширина устройства, начальный масштаб = 1.0 " />

< meta http-Equiv = " X-UA-Compatible " контент = " ie = edge " />

< название > Документ название >

< ссылка rel = «таблица стилей» href =

целостность =

"sha384-MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

2

11 crossover

11

"sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo"

crossorigin = "анонимный" >

сценарий >

< сценарий src =

13

целостность =

"sha384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK / l8WvCWPIPm49"

>

< скрипт src =

целостность =

"sha384-ChfqqxuZUCnJSK3 +

" sha384-ChfqqxuZUCnJSK3 + MX512MXXXMXXXXMXXXMXXXXXMXXXXXXMXXXXXXMXXXXMXXXMXXXXMXXXMXXXMXXXMXXXMXXXMXXMXXXX 0011 crossorigin = "анонимный" >

сценарий >

< стиль >

.заголовок {

положение: липкое;

верх: 0;

}

. Контейнер {

ширина: 600 пикселей;

высота: 300 пикселей;

переполнение: авто;

}

h2 {

цвет: зеленый;

}

стиль >

головка >

< корпус 1> 900

< div class = «контейнер» >

< h2 > GeeksforGeeks h2 >

< b > Прикрепленный заголовок в таблице b >

< таблица класс = «таблица» >

< thead style = "позиция: липкая; верхняя: 0" class 90 011 = «темный» >

< tr >

< th class = «header» scope = "col" > Курс th >

< th class = "header" scope = "col « > Дата начала th >

< th class = « header » scope = « col » > Сборы th >

< th class = «заголовок» объем = "col" > Тип th >

tr >

борд >

< кузов >

< tr >

< td > CAT td >

< td > 1 августа td >

< td > Бесплатно td >

< td > Интернет td >

9001 1 tr >

< tr >

< td > GATE td >

< td > 5 июля td >

< td > Бесплатно td >

< td > Интернет td >

tr >

< tr >

< td > DSA td >

< td > 1 июля td >

< td > 2499 td >

< td > Онлайн td >

tr >

< tr >

< td > Java Бэкэнд td >

< td > 28 марта td >

< td > 10999 td >

< td > Не в сети 900 11 td >

tr >

< tr >

< td > SDE td >

< td > 1 сентября td >

< td > 299 td >

< td > Онлайн td >

tr >

< tr >

< td > Размещение СУДО td >

< td > 20 сентября td >

< td > Бесплатно td >

< td > Онлайн td >

tr >

кузов >

таблица >

корпус >

html >

Bootst Столы | Set-1

< html lang = "en" >

< головка >

< meta charset = "utf-8" >

< meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no" >

< title > Bootstrap | Таблицы название >

< стиль >

h2 {

цвет: зеленый;

выравнивание текста: по центру;

}

div {

margin-top: 10px;

}

стиль >

головка >

< корпус

< div class = «контейнер» >

< h2 > GeeksForGeeks h2 >

< table class = «table» >

< thead class = «thead-light» >

< tr >

< th scope = "col" > S.№ td >

< th сфера применения = «col» > Название td >

< th scope = "col" > City td >

< th scope = "col" > Возраст td >

tr >

thead >

< tbody >

< tr >

< th сфера применения 90 012 = «ряд» > 1 td >

< td > Ajay td >

< td > Patna td >

< td > 20 td >

tr >

< tr >

< th scope = «ряд» > 2 td >

< td > Rahul td >

< td > Чандигарх td >

< td > 17 td >

tr >

< tr >

< th область действия = «строка» > 3 td >

< td > Паруш td >

< td > Калькутта td >

< td > 22 td >

tr >

tbody >

таблица >

< таблица класс = "таблица " >

< thead class = " thead-dark " >

< tr >

< th область применения = "col" > S.№ td >

< th сфера применения = «col» > Название td >

< th scope = "col" > City td >

< th scope = "col" > Возраст td >

tr >

thead >

< tbody >

< tr >

< th сфера применения 90 012 = «ряд» > 1 td >

< td > Ajay td >

< td > Patna td >

< td > 20 td >

tr >

< tr >

< th scope = «ряд» > 2 td >

< td > Rahul td >

< td > Чандигарх td >

< td > 17 td >

tr >

< tr >

< th область действия = «строка» > 3 td >

< td > Паруш td >

< td > Калькутта td >

< td > 22 td >

tr >

кузов >

таблица >

div >

корпус >

html >

.

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

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