0

Есть таблица и есть progressbar Мне необходимо как то бар поставить под thead просто визуально, без обработки. введите сюда описание изображения

Вот код таблицы

<table style="max-width: 1200px;min-width: 320px;width: 100%;text-align: center;margin: 0px auto;" class="table table-sm table-bordered table-responsive">
<thead style="background: #eaf9fc;">
<tr class="mmm">
   <th style="text-align: center;font-size: 20px;padding: 20px;">Откуда</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Куда</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Туда-Обратно</th>
    <th style="text-align: center;font-size: 20px;padding: 20px;">Старая цена</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Новая цена</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Скидка</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Ссылка</th>

</tr>
</thead>


<tbody id="auto_price"></tbody>
</table>

А вот бар

<div class="progress-bar blue">
  <span></span>
</div>

Что только не делал, или встает над всей таблицей как на скрине или же в одну ячейку таблицы. Сайт aviareysi.ru - если нужен. Спасибо

td формируются скриптом

var main_tpl = '<tr style="background:rgba(248, 203, 227, 0.49);">'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;" data-label="Откуда">' + From + '</td>'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;" data-label="Куда">' + To + '</td>'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;" data-label="Дата">' + datew + '</td>'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;" data-label="Старая цена">' + price_old + '</td>'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;" data-label="Новая цена">' + price_new + '</td>'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;" data-label="Скидка">' + percentage + '</td>'
                +'<td style="background:rgba(248, 203, 227, 0.22);font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">' + title_link + '</td>'
                +'</tr>';

Прошу помощи!

1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – user177221
    13 сен 2017 в 17:23

1 ответ 1

1

Для этого достаточно вставить еще одну строчку в thead с ячейкой, у которой colspan взят с допустимым запасом. Поскольку в страницах редко встречаются таблицы больше 40 ячеек, то условия colspan="100" будет вполне достаточно.

<thead style="background: #eaf9fc;">
...
<tr>
   <td colspan="100">
       <div class="progress-bar blue">
           <span></span>
       </div>
   </td>
</tr>
</thead>

Полный пример:

.progress-bar {
    height: 20px;
    position: relative;
    width: 100%;
}

.progress-bar.blue > span {
    background-color: #5dbbf2;
}

.progress-bar > span {
    display: block;
    margin: auto;
    height: 100%;
    background-color: blue;
    background-image: linear-gradient(center bottom, white 40%, #54f054 69%);
    position: relative;
    overflow: hidden;
}

.progress-bar > span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.3)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.75, rgba(255, 255, 255, 0.3)), color-stop(0.75, transparent), to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
    z-index: 1;
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    overflow: hidden;
}
<table style="max-width: 1200px;min-width: 320px;width: 100%;text-align: center;margin: 0px auto;" class="table table-sm table-bordered table-responsive">
<thead style="background: #eaf9fc;">
<tr class="mmm">
   <th style="text-align: center;font-size: 20px;padding: 20px;">Откуда</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Куда</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Туда-Обратно</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Старая цена</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Новая цена</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Скидка</th>
   <th style="text-align: center;font-size: 20px;padding: 20px;">Ссылка</th>
</tr>
<tr>
   <td colspan="100">
       <div class="progress-bar blue">
           <span></span>
       </div>
   </td>
</tr>
</thead>
<tbody id="auto_price">
    <tr style="background: rgb(255, 255, 255);">
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;">Москва (Россия)</td>
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;">Апиа (Самоа)</td>
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;">30.12 - 14.01</td>
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;">213284</td>
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;">140839</td>
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;">34%</td>
        <td style="padding: 20px;background:rgba(248, 203, 227, 0.22);font-size: 17px;font-family: Open Sans;font-weight: 400;"><a style="padding:3px;text-decoration:none;background: #00a4f7;box-shadow: 0px 0px 1px 0px #000000;color: #fff;" title="Посмотреть авиабилет undefined undefined undefinedundefined" rel="nofollow" target="_blank">Перейти</a></td></tr>
</tbody>
</table>

1
  • Спасибо большое
    – Arcadiy
    5 авг 2017 в 5:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.