Как вставить progressbar в таблицу?

404

06 августа 2017, 06:15

Есть таблица и есть 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>';

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

Answer 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>