Курс по JavaScript от Хекслет

Классы Bootstrap для стилизации таблиц

Александр Мальцев
Александр Мальцев
131K
37
Содержание:
  1. Основы создания таблиц в HTML
  2. Оформление таблиц с помощью CSS классов Bootstrap
  3. Комментарии

На этом уроке Вы научитесь создавать HTML таблицы и оформлять их с помощью CSS классов платформы Twitter Bootstrap 3.

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

Создание таблицы осуществляется посредством тегов языка HTML. После создания таблицы веб-разработчик переходит к её оформлению с помощью написания правил CSS. Данный процесс можно значительно упростить, используя большое количество готовых CSS классов платформы Twitter Bootstrap 3. Процесс оформления таблицы с помощью Twitter Bootstrap осуществляется путём добавления к таблице или к её различным частям (строке, ячейке) соответствующих классов. Задавая те или иные классы, Вы тем самым задаёте то или иное оформление таблицы.

Основы создания таблиц в HTML

Создание таблицы в HTML начинается с элемента table (<table>...</table>), внутри которого помещают шапку (<thead>...</thead>) и основное содержимое (<tbody>...</tbody>). Далее в элемент thead и tbody помещают строки (<tr>...</tr>). После этого в элементе tr (<tr>...</tr>) создают ячейки с помощью элементов td (<td>...</td>) и th (<th>...</th>), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент th (<th>...</th>) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.

HTML - основы создания таблиц

Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:

  • rowspan="N" - объединяет N ячеек по вертикали;
  • colspan="N" - объединяет N ячеек по горизонтали.

Применять данные атрибуты можно для элементов td и th.

Например:

HTML - объединение ячеек таблиц
<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Содержимое ячейки</td>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td>Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td rowspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
  </tbody>
</table>

Для указанания названия таблицы используется элемент caption (<caption>...</caption>), который размещается внутри элемента table сразу же после его открывающего тега.

<table>
  <caption>
    Название таблицы
  </caption>
  ...
</table>

Оформление таблиц с помощью CSS классов Bootstrap

Базовое оформление таблиц

Для придания таблицы базового оформления необходимо добавить класс .table к элементу table:

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

Например:

<table class="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>ivan@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петр</td>
      <td>Щербаков</td>
      <td>petr@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Юрий</td>
      <td>Голов</td>
      <td>yuri@mail.ru</td>
    </tr>
  </tbody>
</table>
Bootstrap 3 - оформление таблицы с помощью класса table

Оформление таблиц по типу полос "зебры"

Для выделения нечётных строк основной части таблицы (<tbody>...</tbody>) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table.

<table class="table table-striped">
...
</table>
Внимание: Для оформления таблиц по типу полос "зебры" в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.

Например:

<table class="table table-striped">
  <thead>
    <tr>
      <th>№ п/п</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Иван</td>
      <td>Чмель</td>
      <td>ivan@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петр</td>
      <td>Щербаков</td>
      <td>petr@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Юрий</td>
      <td>Голов</td>
      <td>yuri@mail.ru</td>
    </tr>
  </tbody>
</table>
Bootstrap 3 - оформление таблицы с помощью класса table-striped

Создание таблицы с границами

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

<table class="table table-bordered">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)

Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента <table>.

<table class="table table-hover">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание сжатой или компактной таблицы

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

<table class="table table-condensed">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

Bootstrap 3 - Создание сжатой или компактной таблицы

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

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

<table class="table">
    <thead>
        <tr>
            <th>№ чека</th>
            <th>Способ платежа</th>
            <th>Дата платежа</th>
            <th>Сумма</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>2803</td>
            <td>Наличные</td>
            <td>04.08.2014</td>
            <td>2005.00</td>
        </tr>
        <tr class="success">
            <td>2804</td>
            <td>Карта VISA</td>
            <td>04.08.2014</td>
            <td>1270.00</td>
        </tr>
        <tr class="info">
            <td>2805</td>
            <td>Наличные</td>
            <td>05.08.2014</td>
            <td>1356.50</td>
        </tr>
        <tr class="warning">
            <td>2806</td>
            <td>Наличные</td>
            <td>05.08.2014</td>
            <td>5200.05</td>
        </tr>
        <tr class="danger">
            <td>2807</td>
            <td>Карта VISA</td>
            <td>06.08.2014</td>
            <td>315.70</td>
        </tr>
    </tbody>
</table>

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap 3 - Дополнительные акцентные классы для строк таблицы

Создание адаптивной таблицы с помощью Bootstrap

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

<div class="table-responsive"> 
<table class="table table-bordered">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
            <th>Увлечения</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
            <td>Плавание, бодибилдинг, боевые искусства</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
            <td>Европейские танцы, Стрип-денс, Ролики</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
            <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
        </tr>
    </tbody>
</table>
</div>

Табличные теги, поддерживаемые Twitter Bootstrap 3

В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.

Тег Описание
<table> Контейнер для элементов, определяющих содержимое таблицы
<caption> Заголовок таблицы
<thead> Контейнер для элементов, формирующих «шапку» таблицы
<tbody> Контейнер для элементов, формирующих основную часть таблицы
<tr> Контейнер для ячеек, являющихся элементами одной строки
<th> Специальная табличная ячейка для заголовков столбцов
<td> Табличная ячейка, предназначенная для размещения основных табличных данных

Комментарии: 37

  1. Роман
    Роман
    2020-09-15 15:27:52
    Вот тут как сделали так таблицу
    digitalskytechnologies.ru/frontend.php
    там где идет описание «Как выбрать между адаптивной и мобильной версткой?»
    Задал те же классы:
    <table class="table table-striped table-responsive">
    Но все равно не получается как там у них на сайте, все время появляется скролл при уменьшении экрана а у них нет
  1. Александр Мальцев
    Александр Мальцев
    2020-09-16 14:32:32
    Так и должен появляться горизонтальный скролл.
    У них тоже он есть:
    Появление скролла при уменьшении размера экрана в Bootstrap
  • Роман
    Роман
    2020-09-16 14:37:52
    Да спасибо большое за ответ, но я не правильно сформулировал, мне как раз нужно чтоб он не появлялся, извиняюсь что затупил. Как раз все хочу сделать также но без скролла.

    Конечно я могу использовать скрытие скролла методами css — hide но тогда таблица все равно не адаптивна будет. Я перепробовал много вариантов и почему то в бутстрапе нет полностью адаптивной таблицы под маленькие экраны телефонов
  • Александр Мальцев
    Александр Мальцев
    2020-09-16 15:18:39
    Это понятно. Но, если честно, даже представить не могу, как таблицу, например, из 3 строк и 5 колонок поместить на экран смартфона без добавления к ней горизонтального скролла. Если на мобильных устройствах выстроить всё вертикально, то тогда это будет уже не таблица, и при её чтении не будет понятно к чему эта информация относится (если рассматривать пример, который вы привели выше, то при чтении текста нужно уже будет считать блоки и определять к какому же столбцу эта информация относится: к адаптивной или мобильной верстки сайта). Если есть идеи, как табличную информацию на мобильных устройствах вывести по-другому, то напишите их или нарисуйте.
  • Роман
    Роман
    2020-09-16 16:13:08
    Да согласен, тут делать только так codepen.io/MaxGraph/pen/gyxqpB
    В любом случае большое спасибо Александр
  • Максим
    Максим
    2020-07-28 21:43:28
    Добрый день!
    Для указания названия таблицы используется элемент caption (...), который размещается внутри элемента table сразу же после его открывающего тега.
    <table>
      <caption>
        Название таблицы
      </caption>
      ...
    </table>
    
    У меня получилось название таблицы снизу под таблицей. Как сделать название сверху таблицы?
    1. Александр Мальцев
      Александр Мальцев
      2020-07-30 16:00:16
      Здравствуйте! Положение название заголовка определяется CSS свойством caption-side. Для того чтобы название таблицы отображалась сверху данному CSS свойству следует установить значение top:
      <table>
        <caption style="caption-side: top;">
          Название таблицы
        </caption>
        ...
      </table>
      
  • Oleg
    Oleg
    2019-07-12 10:50:59
    Здравствуйте! У меня есть таблица с закрепленым хидером. В одном из столбцов таблицы используются checkboxes. Но возникает проблема при скроллинге: текст из соседних ячеек скрывается за хидером. а чекбокс отображается поверх хидера при прокрутке. Подскажите пожалуйста, как можно скрыть чекбокс за хидером при скроллинге средствами bootstrap.
    Спасибо!
    1. Oleg
      Oleg
      2019-07-15 11:07:28
      Неужели чекбок. как объект не может быть скрыт за хидером при прокрутке?
    2. Александр Мальцев
      Александр Мальцев
      2019-07-15 15:34:30
      Здравствуйте! Это определяется с помощью z-index. Для того чтобы это осуществить они должны находиться не в основном потоке.
      Задайте для чекбокса, если он не находиться в основном потоке position:relative и z-index меньше чем у хедера таблицы. Если у хедера таблицы нет z-index, то установите ему его, но со значением большим чем у чекбокса.
    3. Oleg
      Oleg
      2019-07-16 07:54:57
      Огромное вам спасибо! результат положительный. Век живи — век учись!
  • Иван
    Иван
    2016-09-23 09:43:21
    Здравствуйте. Подскажите простой способ зафиксировать шапку в таблице таблица при этом не имеет фиксированной высоты и длины. width:auto; Надо чтобы при прокрутке вниз страницы, thead оставался на месте, а tbody прокручивалось
    1. Александр Мальцев
      Александр Мальцев
      2016-09-24 12:46:07
      Здравствуйте. Вы в любом случае должны указать высоту, с помощью которой необходимо ограничить тело таблицы (например, 150px). Ширина таблицы будет зависеть от ширины блока, в который вы её поместили. В этом примере фиксирование шапки HTML таблицы осуществляется с помощью добавления класса table-fixed к элементу table. Ширина ячеек управляется с помощью классов сетки Bootstrap col-xs-* (при необходимости данную опцию можно вынести в CSS).
      Например, HTML таблица:
      <table class="table table-fixed">
        <thead>
          <tr>
            <th class="col-xs-2">#</th><th class="col-xs-8">Наименование</th><th class="col-xs-2">Цена</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-xs-2">1</td><td class="col-xs-8">Хлеб ржаной</td><td class="col-xs-2">23,50 р.</td>
          </tr>
          <tr>
            <td class="col-xs-2">2</td><td class="col-xs-8">Хлеб пшеничный</td><td class="col-xs-2">27,00 р.</td>
          </tr>
          <tr>
            <td class="col-xs-2">3</td><td class="col-xs-8" ">Хлеб новый</td><td class="col-xs-2">33,20 р.</td>
          </tr>
          <tr>
            <td class="col-xs-2">4</td><td class="col-xs-8">Хлеб подольский</td><td class="col-xs-2">27,50 р.</td>
          </tr>
          <tr>
            <td class="col-xs-2">5</td><td class="col-xs-8">Хлеб серый</td><td class="col-xs-2">21,00 р.</td>
          </tr>           
        </tbody>
      </table>
      
      CSS-код:
      .table-fixed {
        width: 100%;
      }
      table.table-fixed,
      table.table-fixed>thead,
      table.table-fixed>tbody,
      table.table-fixed>thead>tr,
      table.table-fixed>tbody>tr,
      table.table-fixed>thead>tr>th,
      table.table-fixed>tbody>td {
        display: block;
      }
      table.table-fixed>thead>tr:after,
      table.table-fixed>tbody>tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
      }
      table.table-fixed>tbody {
        overflow-y: scroll;
        height: 150px;
      }
      table.table-fixed>thead {        
        overflow-y: scroll;
      }
      table.table-fixed>thead::-webkit-scrollbar{
        background-color: inherit;
      }
      table.table-fixed>thead>tr>th,
      table.table-fixed>tbody>tr>td {
        float: left;
      }
      
  • vlad074
    vlad074
    2016-06-09 11:02:40
    Возможно ли в принципе объединить ячейки таблицы по вертикали, по столбцам, в один блок?
    Суть вопроса — заставить каждый такой блок работать как «резиновый», обтекая соседние, или уходя вниз за соседний на мобильном экране, не «разрывая строй» по вертикали, так, чтобы ячейки в таком блоке показывались одна за другой, а не одна-за-одной в рамках строки tr.
    Или проще поменять верстку таблицы на div-структуру, или на таблицу с одним рядом, а в каждую ячейку запихать свою суб-таблицу, или список?
    1. Александр Мальцев
      Александр Мальцев
      2016-06-10 05:54:09
      Для объединения ячеек в таблице используются атрибуты: colspan (по горизонтали) и rowspan (по вертикали). Но это Вам вряд ли поможет, т.к. в таблице строка — это строка и она не может располагаться на нескольких строках. Чтобы это осуществить лучше воспользуйтесь блоками div.
  • rina
    rina
    2016-06-01 10:52:00
    Подскажите, пожалуйста, как сделать цветную шапку таблицы с закругленными углами, чтоб были разделены колонки по всей таблице кроме шапки… возможно ли это?
    1. Stanislav
      Stanislav
      2016-05-29 12:34:07
      Не написали самого главного, как эту таблицу зафиксировать или придать ячейкам размер. У меня все эти строки расширяются на весь экран, даже если одной задаю размер tyle=«width: 150px;
      1. Александр Мальцев
        Александр Мальцев
        2016-05-31 12:52:16
        Если необходимо придать таблицы некоторую ширину лучше сделать так. Обернуть эту таблицу в блок div и уже ему (этому блоку) задать необходимую ширину (и выравнивание):
        <div class="center-block" style="width: 500px;">
          <table class="table">
            ...
          </table>
        </div>
        
        А если необходимо зафиксировать каждую ячейку, то добавляем ширину каждой ячейки:
        <th style="width: 150px;">Имя</th>
        <th style="width: 150px;">Фамилия</th>
        <th style="width: 150px;">Отчество</th>
        
      2. Антоха
        Антоха
        2019-12-24 14:49:31
        Добрый день!

        Такой способ не работает в bootstrap 4:

        А если необходимо зафиксировать каждую ячейку, то добавляем ширину каждой ячейки:
        <th style="width: 150px;">Имя</th>
        <th style="width: 150px;">Фамилия</th>
        <th style="width: 150px;">Отчество</th>
        Подскажите как установить одинаковую/фиксированную ширину каждой ячейке таблицы с rowspan и colspan в bootstrap 4.

        Например в такой, хотелось бы ячейки «Кукуруза» и «Соя», независимо от размера экрана устройства, одинаковой ширины:
        <div class="table-responsive">
        <table class="table table-bordered">
        
        		<thead>
        			<tr>
        				<th rowspan="2">
        					<div class="col-sm-1">Дата:</div>
        					<div class="col-sm">Предприятие - Склад</div>
        				</th>
        				<th colspan="3">Пшеница</th>
        				<th rowspan="2"><div class="col-1">Подсол
        нечник</div></th>
        				<th rowspan="2"><div class="col-1">Ячмень</div></th>
        				<th rowspan="2"><div class="col-1">Рапс</div></th>
        				<th rowspan="2"><div class="col-1">Кукуруза</div></th>
                        <th style="width: 20px;" rowspan="2"><div class="col-1">Соя</div></th>
        			</tr>
        				<tr>
        					<th rowspan="1"><div class="col-1">I класс</div></th>
        					<th rowspan="1"><div class="col-1">II класс</div></th>
        					<th rowspan="1"><div class="col-1">фураж</div></th>
        				</tr>
        		</thead>
        		<tbody>
        
          
          <tr>
        				<td>
        					<select class="form-control" id="sel1" name="org_sklad">
            					<option selected>Выберите склад</option>
          					</select>
        				</td>
            			<td>
        					<input class="form-control" type="text" maxlength="30" name="psh_s1">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="psh_s2">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="psh_sfur">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="podsoln">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="yachm">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="raps">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="kukur">
        				</td>
        				<td>
        					<input class="form-control" type="text" maxlength="30" name="soya">
        				</td>
        			</tr>
                    
          </tbody>
        </table>
        </div>
        <code/>
      3. Антоха
        Антоха
        2019-12-25 12:46:26
        Получилось.
        На примере самой маленькой колонки «Соя»:
        1) создаем CSS:
        .content-w100 {
            width: 100px;
        }
        
        2) добавляем в div поля шапки:
        <th rowspan="2"><div class="col-1 content-w100">Соя</div></th>
        
      4. Александр Мальцев
        Александр Мальцев
        2019-12-25 12:58:54
        Привет! Отлично!
    2. Сергей
      Сергей
      2016-05-20 12:37:59
      Здравствуйте подскажите а табличка резиновая? всмысле с мобильной версии будет отображаться нормально? спасибо
      1. Александр Мальцев
        Александр Мальцев
        2016-05-23 12:42:46
        Да, адаптивная.
        Например:
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
                <th style="width: 150px;">Имя</th>
                <th>Описание</th>
             </tr>
            </thead>
            <tbody>
              <tr>
                <td>Имя 1</td>
                <td>Описание 1...</td>
              </tr>
              <tr>
                <td>Имя 2</td>
                <td>Описание 2...</td>
              </tr>
            </tbody>
          </table>
        </div>
    3. Алексей
      Алексей
      2016-02-29 17:08:10
      Здравствуйте, Александр!
      Возможно ли с Вами обсудить вопрос сотрудничества. Есть ТЗ нуждающееся в реализации. Спасибо.
      1. Сергей
        Сергей
        2016-02-28 15:48:12
        Добрый день, Александр!
        Спасибо за уроки, все очень доступно и содержательно!
        У меня вопрос: можно ли представить таблицу в виде полосок (допустим цветных) не соединенных между собой по вертикали. В классическом виде таблица — это «сетка», то есть строки разделены линией. А как строки разделить «пустотой» чтобы они, если заполнить их цветным фоном, выглядели отдельными полосами? И возможно ли разделить не только по вертикали но и горизонтально разбить на ячейки? К сожалению так и не смог прикрепить картинку. Спасибо.
        1. Александр Мальцев
          Александр Мальцев
          2016-02-29 12:51:03
          Добавить в CSS следующее правило:
          table tr,td,th {
            border: 2px solid #fff !important; 
          }
          
        2. Сергей
          Сергей
          2016-02-29 15:51:34
          Вот сказать, что я премного благодарен — так это все равно что ничего не сказать! Огромнейшее спасибо Вам, Александр!!!
      2. Ulya
        Ulya
        2015-12-20 20:49:08
        Здравствуйте, можно ли запихивать навигационную панель в бутстрап?
        На сколько я понимаю поисковикам отвечающим за места в поисковиках, важна и она(навигационная панелька)
        хочу сделать что-то подобное, но в шаблоне плыву.
        www.dragdropsite.com/demo/mpurpose-free-multipurpose-twitter-bootstrap-3-template/
        логотип правда в моем случае более высокий и менюшка прижата вправо. У меня постоянно то менюшка то мнимо-менюшка (язык и другое) убегают к лого

        ================================================================
        высокий_______________________________________________язык корзина авторизация
        высокий_____________________________________________________________________
        лого__________________________главная / продукция / хиты продаж / новости / контакты
        ===============================================================
        1. Александр Мальцев
          Александр Мальцев
          2015-12-23 04:04:38
          Здравствуйте.
          Для этого желательно использовать сетку Bootstrap, а не таблицы.
        2. Андрей
          Андрей
          2016-01-22 16:37:57
          Здравствуйте! Подскажите пожалуйста, а как можно зафиксировать заголовок адаптивной таблицы. Т.е. что бы у таблицы был скролл по обоим плоскостям, но что бы заголовок пэвсегда оставался на виду. ( перепробывал разные способы, всегда размер полей заголовка не соответствует размерам полей таблицы, максимум, это скролл в обоих плоскостях без заморозки заголовка)
        3. Александр Мальцев
          Александр Мальцев
          2016-01-23 09:51:23
          Здравствуйте, Андрей.
          Взгляните в сторону плагина DataTables для jQuery.
          Там много различных примеров.
          Например, с динамической высотой и прокруткой.
          DataTables (Scroll — vertical, dynamic height)
        4. Андрей
          Андрей
          2016-01-25 15:40:38
          Здравствуйте, Александр!
          Большое Вам спасибо за совет, это именно то, что я искал! Очень хороший плагин! Смотрю и ненарадаюсь!
      3. deny
        deny
        2015-08-05 10:51:19
        спасибо
        1. pupok
          pupok
          2015-03-31 15:26:06
          Подскажите пожалуйста как сделать поиск по таблице
          — ввод по одному или группе символов и в таблице оставались только те строки в ячейке или ячейках, которой данная комбинация совпала
          1. Александр Мальцев
            Александр Мальцев
            2015-03-31 17:13:25
            Добрый день.
            Решение на jQuery.
            HTML:
            Найти: <input id="searchText" type="text">
            <button id="findTable" class="btn btn-default">Найти</button>
             <table class="table table-striped">
              ...
             </table>
            
            Код jQuery:
            //если веб-страницы загружена
            $(document).ready(function() {
              //нажата кнопка с id="findTable"
              $("#findTable").click(function(){
                //сохраняем в переменную текст, который нам необходимо найти в таблице
                //из id="searchText"
                var search = $('#searchText').val().toLowerCase();
                //перебираем всем строки таблицы
                $("table tbody tr").each(function (i) {
                  //если не нахоим искомый текст
                  if ($(this).text().toLowerCase().replace(/\s+/g, '').indexOf(search)==-1)
                    //то скрываем
                    $(this).hide();
                  else
                    //иначе показываем
                   $(this).show();
                });
              });
            });
            
        2. Виктор
          Виктор
          2015-02-27 23:28:35
          Возможно ли во втором примере, окрасить ячейки с названием столбцов в нужный цвет? Если да то как?
          1. Александр Мальцев
            Александр Мальцев
            2015-02-28 04:24:16
            Для того чтобы окрасить строку с названием столбцов в нужный цвет, необходимо добавить к соответствующий контекстный класс Bootstrap 3 или создать свой.
            Пример с использованием class=«danger» Bootstrap:
            <table class="table table-striped">
              <thead>
                <tr class="danger">
                  <th>№ п/п</th>
                  <th>Имя</th>
                  <th>Фамилия</th>
                  <th>E-mail</th>
                </tr>
              </thead>
              <tbody>
                <!--Содержимое tbody-->
              </tbody>
            </table>
            
            Пример с использованием своего класса «mycolor».
            CSS:
            .table>thead>tr.mycolor>th {
            /* Цвет фона */
            background-color: #1d9ae1;
            /* Цвет текста */
            color: #ffffff;
            }
            
            HTML:
            <table class="table table-striped">
              <thead>
                <tr class="mycolor">
                ...
            
            Также можно изменить цвет отдельной ячейки заголовка таблицы в нужный цвет. Для этого необходимо добавить к соответствующий контекстный класс Bootstrap 3 или создать свой класс CSS.
            CSS:
            .table>thead>tr>th.mythcolor1 {
            background-color: red;
            color: #ffffff;
            }
            .table>thead>tr>th.mythcolor2 {
            background-color: blue;
            color: #ffffff;
            }
            /*...*/
            
            HTML:
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="mythcolor1">№ п/п</th>
                  <th class="mythcolor2">Имя</th>
                  <th class="mythcolor3">Фамилия</th>
                  <th class="mythcolor4">E-mail</th>
                </tr>
              </thead>
              <tbody>
                <!--Содержимое tbody-->
              </tbody>
            </table>