Использование блокировки заголовка CSS после .html () не работает в дополнительном div

Я пытаюсь получить эту блокировку заголовка CSS: JSFiddle работает после загрузки .html (). Он отлично работает, если я перехожу прямо на страницу php, но если я ссылаюсь на него с другой страницы и загружаю в div, я не могу заставить его работать, и я не могу понять, почему. У меня такое чувство, что это как-то связано с дополнительным блоком на странице «Загрузка». Все остальное работает нормально, я просто не могу заставить заголовки зависать при загрузке с другой страницы. Любая помощь приветствуется. Спасибо!

CSS:

div.esp{
    overflow-x: auto;
    white-space: nowrap;
    width: 500px;
    height: 200px;
    overflow: auto
}


/*the following html and body rule sets are required only if using a % width or height*/
html {
    width: 100%;
    height: 100%;
}
body {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 20px 0 20px;
  background: white;
}
.scrollingtable {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: auto; /*if you want a fixed width, set it here, else set to auto*/
    min-width: /*0*/100%; /*if you want a % width, set it here, else set to 0*/
    height: /*188px*/100%; /*set table height here; can be fixed value or %*/
    min-height: /*0*/104px; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 15px;
    line-height: 20px;
    padding: 20px 0 20px 0; /*need enough padding to make room for caption(s)*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
    position: relative;
    border-top: 1px solid black;
    height: 100%;
    padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
    top: 0;
    background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
}
.scrollingtable > div > div {
    min-height: /*0*/43px; /*if using % height, make this large enough to fit scrollbar arrows*/
    max-height: 100%;
    overflow: /*scroll*/auto; /*set to auto if using fixed or % width; else scroll*/
    overflow-x: hidden;
    border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
    width: 100%;
    border-spacing: 0;
    margin-top: -20px; /*inverse of column header height*/
    margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
    position: absolute;
    top: -20px; /*inverse of top caption height*/
    margin-top: -1px; /*inverse of border-width*/
    width: 100%;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
    vertical-align: bottom;
    white-space: nowrap;
    text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
    display: inline-block;
    padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 20px; /*match column header height*/
    border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
    position: absolute;
    top: 0;
    white-space: pre-wrap;
    color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
    content: "";
    display: block;
    min-height: 20px; /*match column header height*/
    padding-top: 1px;
    border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
    position: absolute;
    width: 100px;
    top: -1px; /*inverse border-width*/
    background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
    content: "";
    display: table-cell;
    position: relative;
    padding: 0;
    border-top: 1px solid black;
    top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
    border-bottom: 1px solid black;
    padding: 0 6px 0 6px;
    height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/

ОБРАЗЕЦ PHP, он проходит через mysql для извлечения данных, показывая это для настроек таблицы HTML: 

$HTMLTable = "<div class=\"scrollingtable\"><div><div><table id=\"myTable\" class=\"search-table inner\">";
$HTMLTable .= "<thead><tr><th><div><div>Peer IP</div><div>Peer IP</div></div></th>";
$HTMLTable .= "<th><div><div>Local Identity</div><div>Local Identity</div></div></th>";
$HTMLTable .= "<th><div><div>Remote Identity</div><div>Remote Identity</div></div></th>";
$HTMLTable .= "<th style=\"min-width: 75px;\"><div><div>Last Change</div><div>Last Change</div></div></th>";
$HTMLTable .= "<th><div><div>Previous Packet Encapsulations</div><div>Previous Packet Encapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Packet Encapsulations</div><div>Packet Encapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Difference for Encapsulations</div><div>Difference for Encapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Previous Packet Decapsulations</div><div>Previous Packet Decapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Packet Decapsulations</div><div>Packet Decapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Difference for Decapsulations</div><div>Difference for Decapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Send Errors</div><div>Send Errors</div></div></th>";
$HTMLTable .= "<th><div><div>Receive Errors</div><div>Receive Errors</div></div></th>";
$HTMLTable .= "<th style=\"min-width: 200px;\"><div><div>Inbound esp sas</div><div>Inbound esp sas</div></div></th>";
$HTMLTable .= "<th><div><div>Outbound esp sas</div><div>Outbound esp sas</div></div></th>";
$HTMLTable .= "<th class=\"scrollbarhead\"></th></tr></thead><tbody>";
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $InESPLines = explode("<br>",$row['in_esp']);
            foreach ($InESPLines as $InESPLine){
                if (preg_match("/inbound esp sas/",$InESPLine)){
                    $InESP .= $InESPLine;
                }
                elseif (preg_match("/spi:/",$InESPLine)){
                    $InESP .= "<br>&nbsp" . $InESPLine;
                }
                else {
                    $InESP .= "<br>&nbsp&nbsp&nbsp" . $InESPLine;
                }
            }   
        $OutESPLines = explode("<br>",$row['out_esp']);
            foreach ($OutESPLines as $OutESPLine){
                if (preg_match("/outbound esp sas/",$OutESPLine)){
                    $OutESP .= $OutESPLine;
                }
                elseif (preg_match("/spi:/",$OutESPLine)){
                    $OutESP .= "<br>&nbsp" . $OutESPLine;
                }
                else {
                    $OutESP .= "<br>&nbsp&nbsp&nbsp" . $OutESPLine;
                }
            }
        $Peer = $row['peer'];
        $phpdate = strtotime( $row['date_time'] );
        $myFormatForView = date("m/d/y", $phpdate);
        $myFormatForView .= "<br>" . date("g:i A", $phpdate);
        $DifferenceEncaps = $row['encaps'] - $row['prev_encaps'];
        $DifferenceDecaps = $row['decaps'] - $row['prev_decaps'];
        $HTMLTable .= "<tr><td><div class=\"content\">$Peer<button id=\"$Peer\">Update for this Peer</button></div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['local_identity'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['remote_identity'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $myFormatForView . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['prev_encaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['encaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">$DifferenceEncaps</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['prev_decaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['decaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">$DifferenceDecaps</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['send_err'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['recv_err'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"esp\">" . $InESP . "</div></td>";
        $HTMLTable .= "<td><div class=\"esp\">" . $OutESP . "</div></td></tr>";
        $InESP = "";
        $OutESP = "";

    }   
}

$HTMLTable . = "</tbody></table></div></div></div></div>";

print $HTMLTable;

?>

Страница загрузки:

$('#loading_spinner').show();

var post_data = "Peer = " + "<?php echo $_REQUEST['Peer']?>";
$.ajax({
    url: 'phase2sql.php',
    type: 'POST',
    data: post_data,
    dataType: 'html',
    success: function(data) {
        $('.my_update_panel').html(data);
//Moved the hide event so it waits to run until the prior event completes
//It hide the spinner immediately, without waiting, until I moved it here
        $('#loading_spinner').hide();
    },
    error: function() {
        alert("Something went wrong!");
    }
});


<html> 
<head>
<script src = "../../jquery/jquery-1.11.0.min.js"></script>
<link rel = "stylesheet" href = "../../jquery/jquery-ui.theme.css">
<script src = "../../jquery/jquery-ui.js"></script>
<link rel = "stylesheet" href = "../../jquery/jquery-ui.css"> 
<link rel = "stylesheet" type = "text/css" href = "newphase2.css">
<div id = "loading_spinner" style = "width:100%">
<div id = "load">Loading, please stand by...
<img id = "Spinner" src = "../../images/ccf.gif"/>
</div>
</div>
<div class = "my_update_panel"></div> 
</head>
</html>
jquery css locking freeze
17.04.2018 06:46
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
1
0
43
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, что не рекомендуется помещать такие элементы, как DIV, внутри <head>, мне даже любопытно, что это работает для вас.

Я бы порекомендовал вам не писать HTML с PHP, я бы попробовал отправить JSON и обработать их на клиенте. Это может полностью изменить ваш код, но это будет хорошей практикой, и вы получите большую производительность.

чтобы отправить результаты своей базы данных, вы можете сделать это

header("Content-type: application/json;charset=UTF-8");
header("Pragma: no-cache");
header("Expires: 0");

echo json_encode($result) 
//if you have problems to format in JSON try this
//echo json_encode(utf8_encode($result))

json_encode может создавать проблемы, я решаю их, создавая свой JSON вручную. это немного больше работы

echo '{"items":[';
while ($row = $results->fetch_assoc() ) {
      $sku    = json_encode(utf8_encode($row["name"]));
      $value  = json_encode(utf8_encode($row["value"]));
      echo ('{"sku":'.$sku.',');
      echo ('"value":'.$value.'');
     }
echo "]}";

в javascript вы можете использовать AJAX для получения и отправки запросов без обновления страницы.

function getURL(){
   var xhttp = new XMLHttpRequest();
   tablaHTML = document.getElementById('ID OF TBODY OR DIV')
   tablaHTML = '';
   xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            result = JSON.parse(this.responseText);
            result.forEach(function(item){
                   tablaHTML += '<tr>';
                   tablaHTML += '<td>' + item.local_identity + '</td>';
                   tablaHTML += '</tr>';
              });
        }
    }
    xhttp.open('GET', 'URL END POINT', true);
    xhttp.send();
}

Извините, что не использую JQuery, я обычно его использую.

до того, как я много использовал PHP для рендеринга HTML, пока я не понял, насколько я могу перегрузить сервер с помощью этого типа практики, в другом случае я использую PHP для выполнения серверной части и микросервисов, используя клиентские обработка

Спасибо за совет! Я займусь этим. В итоге я использовал другой метод для замораживания верхнего ряда. В итоге я использовал GridViewScroll, это довольно хороший инструмент. github.com/twlikol/GridViewScroll

— Shawn Babinyecz 19.04.2018 22:13
18.04.2018 07:38
Ответ принят как подходящий

Просто используйте https://github.com/twlikol/GridViewScroll для замораживания верхней строки в таблице html.

19.04.2018 22:13

Другие вопросы по теме

Цвет встроенного стиля Angular js не работает в IE 11
Overflow-y: скрыто, но должно включать прокрутку мыши
Эллипс идет после последней кнопки в подключаемом модуле jquery с поддержкой данных
Почему нижнее поле внутри поля элемента для кнопки, а не элемента p?
Выровнять кнопку по нижнему правому краю формы
Не работает эффект наведения курсора на иконки Font Awesome Icons
Включить воспроизведение файла Gif, когда пользователь прокручивает и затем останавливается
Изменение существующей темы Drupal
Прокрутка привязки к разделам
Как использовать <pre> или что-то подобное для сохранения разрывов строк в базе данных в react native?

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

Загружать посты по клику
Как загрузить `google map` в` div` прямо в контейнер?
Эллипс идет после последней кнопки в подключаемом модуле jquery с поддержкой данных
Как вернуть событие прокрутки колеса мыши, когда отвязка не работает
Автозаполнение не работает в веб-части редактора контента Sharepoint 2013
Функция .remove () не работает должным образом jquery
Отправить $ _POST и $ _FILES вместе с использованием поля данных AJAX, чтобы PHP мог получить значение?
Обратный вызов мыши не работает после перетаскивания
Автозаполнение jquery из базы данных с помощью Spring Boot
Конфликт скрипта ajax с другими