Bootstrap 3 - Оформление HTML таблиц

Александр Мальцев
Александр Мальцев
121K
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> Табличная ячейка, предназначенная для размещения основных табличных данных

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

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

        Конечно я могу использовать скрытие скролла методами css — hide но тогда таблица все равно не адаптивна будет. Я перепробовал много вариантов и почему то в бутстрапе нет полностью адаптивной таблицы под маленькие экраны телефонов
        1. Александр Мальцев
          16 сентября 2020, 15:18
          Это понятно. Но, если честно, даже представить не могу, как таблицу, например, из 3 строк и 5 колонок поместить на экран смартфона без добавления к ней горизонтального скролла. Если на мобильных устройствах выстроить всё вертикально, то тогда это будет уже не таблица, и при её чтении не будет понятно к чему эта информация относится (если рассматривать пример, который вы привели выше, то при чтении текста нужно уже будет считать блоки и определять к какому же столбцу эта информация относится: к адаптивной или мобильной верстки сайта). Если есть идеи, как табличную информацию на мобильных устройствах вывести по-другому, то напишите их или нарисуйте.
          1. Роман
            16 сентября 2020, 16:13
            Да согласен, тут делать только так codepen.io/MaxGraph/pen/gyxqpB
            В любом случае большое спасибо Александр
    2. Максим
      28 июля 2020, 21:43
      Добрый день!
      Для указания названия таблицы используется элемент caption (...), который размещается внутри элемента table сразу же после его открывающего тега.
      <table>
        <caption>
          Название таблицы
        </caption>
        ...
      </table>
      
      У меня получилось название таблицы снизу под таблицей. Как сделать название сверху таблицы?
      1. Александр Мальцев
        30 июля 2020, 16:00
        Здравствуйте! Положение название заголовка определяется CSS свойством caption-side. Для того чтобы название таблицы отображалась сверху данному CSS свойству следует установить значение top:
        <table>
          <caption style="caption-side: top;">
            Название таблицы
          </caption>
          ...
        </table>
        
      2. Oleg
        12 июля 2019, 10:50
        Здравствуйте! У меня есть таблица с закрепленым хидером. В одном из столбцов таблицы используются checkboxes. Но возникает проблема при скроллинге: текст из соседних ячеек скрывается за хидером. а чекбокс отображается поверх хидера при прокрутке. Подскажите пожалуйста, как можно скрыть чекбокс за хидером при скроллинге средствами bootstrap.
        Спасибо!
        1. Oleg
          15 июля 2019, 11:07
          Неужели чекбок. как объект не может быть скрыт за хидером при прокрутке?
          1. Александр Мальцев
            15 июля 2019, 15:34
            Здравствуйте! Это определяется с помощью z-index. Для того чтобы это осуществить они должны находиться не в основном потоке.
            Задайте для чекбокса, если он не находиться в основном потоке position:relative и z-index меньше чем у хедера таблицы. Если у хедера таблицы нет z-index, то установите ему его, но со значением большим чем у чекбокса.
            1. Oleg
              16 июля 2019, 07:54
              Огромное вам спасибо! результат положительный. Век живи — век учись!
        2. Иван
          23 сентября 2016, 09:43
          Здравствуйте. Подскажите простой способ зафиксировать шапку в таблице таблица при этом не имеет фиксированной высоты и длины. width:auto; Надо чтобы при прокрутке вниз страницы, thead оставался на месте, а tbody прокручивалось
          1. Александр Мальцев
            24 сентября 2016, 12:46
            Здравствуйте. Вы в любом случае должны указать высоту, с помощью которой необходимо ограничить тело таблицы (например, 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;
            }
            
          2. vlad074
            09 июня 2016, 11:02
            Возможно ли в принципе объединить ячейки таблицы по вертикали, по столбцам, в один блок?
            Суть вопроса — заставить каждый такой блок работать как «резиновый», обтекая соседние, или уходя вниз за соседний на мобильном экране, не «разрывая строй» по вертикали, так, чтобы ячейки в таком блоке показывались одна за другой, а не одна-за-одной в рамках строки tr.
            Или проще поменять верстку таблицы на div-структуру, или на таблицу с одним рядом, а в каждую ячейку запихать свою суб-таблицу, или список?
            1. Александр Мальцев
              10 июня 2016, 05:54
              Для объединения ячеек в таблице используются атрибуты: colspan (по горизонтали) и rowspan (по вертикали). Но это Вам вряд ли поможет, т.к. в таблице строка — это строка и она не может располагаться на нескольких строках. Чтобы это осуществить лучше воспользуйтесь блоками div.
            2. rina
              01 июня 2016, 10:52
              Подскажите, пожалуйста, как сделать цветную шапку таблицы с закругленными углами, чтоб были разделены колонки по всей таблице кроме шапки… возможно ли это?
              1. Stanislav
                29 мая 2016, 12:34
                Не написали самого главного, как эту таблицу зафиксировать или придать ячейкам размер. У меня все эти строки расширяются на весь экран, даже если одной задаю размер tyle=«width: 150px;
                1. Александр Мальцев
                  31 мая 2016, 12:52
                  Если необходимо придать таблицы некоторую ширину лучше сделать так. Обернуть эту таблицу в блок 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>
                  
                  1. Антоха
                    24 декабря 2019, 14:49
                    Добрый день!

                    Такой способ не работает в 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/>
                    1. Антоха
                      25 декабря 2019, 12:46
                      Получилось.
                      На примере самой маленькой колонки «Соя»:
                      1) создаем CSS:
                      .content-w100 {
                          width: 100px;
                      }
                      
                      2) добавляем в div поля шапки:
                      <th rowspan="2"><div class="col-1 content-w100">Соя</div></th>
                      
                      1. Александр Мальцев
                        25 декабря 2019, 12:58
                        Привет! Отлично!
                2. Сергей
                  20 мая 2016, 12:37
                  Здравствуйте подскажите а табличка резиновая? всмысле с мобильной версии будет отображаться нормально? спасибо
                  1. Александр Мальцев
                    23 мая 2016, 12:42
                    Да, адаптивная.
                    Например:
                    <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>
                  2. Алексей
                    29 февраля 2016, 17:08
                    Здравствуйте, Александр!
                    Возможно ли с Вами обсудить вопрос сотрудничества. Есть ТЗ нуждающееся в реализации. Спасибо.
                    1. Сергей
                      28 февраля 2016, 15:48
                      Добрый день, Александр!
                      Спасибо за уроки, все очень доступно и содержательно!
                      У меня вопрос: можно ли представить таблицу в виде полосок (допустим цветных) не соединенных между собой по вертикали. В классическом виде таблица — это «сетка», то есть строки разделены линией. А как строки разделить «пустотой» чтобы они, если заполнить их цветным фоном, выглядели отдельными полосами? И возможно ли разделить не только по вертикали но и горизонтально разбить на ячейки? К сожалению так и не смог прикрепить картинку. Спасибо.
                      1. Александр Мальцев
                        29 февраля 2016, 12:51
                        Добавить в CSS следующее правило:
                        table tr,td,th {
                          border: 2px solid #fff !important; 
                        }
                        
                        1. Сергей
                          29 февраля 2016, 15:51
                          Вот сказать, что я премного благодарен — так это все равно что ничего не сказать! Огромнейшее спасибо Вам, Александр!!!
                      2. Ulya
                        20 декабря 2015, 20:49
                        Здравствуйте, можно ли запихивать навигационную панель в бутстрап?
                        На сколько я понимаю поисковикам отвечающим за места в поисковиках, важна и она(навигационная панелька)
                        хочу сделать что-то подобное, но в шаблоне плыву.
                        www.dragdropsite.com/demo/mpurpose-free-multipurpose-twitter-bootstrap-3-template/
                        логотип правда в моем случае более высокий и менюшка прижата вправо. У меня постоянно то менюшка то мнимо-менюшка (язык и другое) убегают к лого

                        ================================================================
                        высокий_______________________________________________язык корзина авторизация
                        высокий_____________________________________________________________________
                        лого__________________________главная / продукция / хиты продаж / новости / контакты
                        ===============================================================
                        1. Александр Мальцев
                          23 декабря 2015, 04:04
                          Здравствуйте.
                          Для этого желательно использовать сетку Bootstrap, а не таблицы.
                          1. Андрей
                            22 января 2016, 16:37
                            Здравствуйте! Подскажите пожалуйста, а как можно зафиксировать заголовок адаптивной таблицы. Т.е. что бы у таблицы был скролл по обоим плоскостям, но что бы заголовок пэвсегда оставался на виду. ( перепробывал разные способы, всегда размер полей заголовка не соответствует размерам полей таблицы, максимум, это скролл в обоих плоскостях без заморозки заголовка)
                            1. Александр Мальцев
                              23 января 2016, 09:51
                              Здравствуйте, Андрей.
                              Взгляните в сторону плагина DataTables для jQuery.
                              Там много различных примеров.
                              Например, с динамической высотой и прокруткой.
                              DataTables (Scroll — vertical, dynamic height)
                              1. Андрей
                                25 января 2016, 15:40
                                Здравствуйте, Александр!
                                Большое Вам спасибо за совет, это именно то, что я искал! Очень хороший плагин! Смотрю и ненарадаюсь!
                        2. deny
                          05 августа 2015, 10:51
                          спасибо
                          1. pupok
                            31 марта 2015, 15:26
                            Подскажите пожалуйста как сделать поиск по таблице
                            — ввод по одному или группе символов и в таблице оставались только те строки в ячейке или ячейках, которой данная комбинация совпала
                            1. Александр Мальцев
                              31 марта 2015, 17:13
                              Добрый день.
                              Решение на 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. Виктор
                              27 февраля 2015, 23:28
                              Возможно ли во втором примере, окрасить ячейки с названием столбцов в нужный цвет? Если да то как?
                              1. Александр Мальцев
                                28 февраля 2015, 04:24
                                Для того чтобы окрасить строку с названием столбцов в нужный цвет, необходимо добавить к соответствующий контекстный класс 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>
                                
                              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.