Javascript: макет таблицы игнорируется при использовании innerHTML

Question

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

На этом рисунке показано, что отображается: Голубым цветом обозначены заголовки столбцов, а черным - таблица. содержание. Как видите, содержимое таблицы не соответствует заголовкам столбцов ...

Это соответствующий фрагмент кода Javascript:

document.getElementById("searchresults").innerHTML = 
  '<div class="table-row"> 
   <div class="table-cell">114</div>
   <div class="table-cell">GebouwEigenaar</div>
   <div class="table-cell">Paleis het Loo</div>
   <div class="table-cell">Begane Grond</div>
   <div class="table-cell">Koffiecorner 1</div>
   <div class="table-cell">Kantoorruimte</div>
   </div>';

Это соответствующий код HTML :

<div id="searchresults"></div>

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

<div class="table-row-header">
  <div class="table-cell col-2" >Sticker-ID</div>
  <div class="table-cell col-2" >Gebouweigenaar</div>
  <div class="table-cell col-2" >Gebouw</div>
  <div class="table-cell col-2" >Verdieping</div>
  <div class="table-cell col-2" >Ruimte</div>
  <div class="table-cell col-2" >Ruimtefunctie</div
</div>

CSS код:

.table { display: table; width: 100%; border-collapse: collapse;}
.table-row { display: table-row; width: 100%; cursor: pointer; position: relative; margin-top: 20px;}
.table-row:nth-child(even) { background: #fafafa; }
.table-row:nth-child(odd) { background: white; }
.table-row-header { display: table-row; width: 100%; color: #0867b3; border-bottom: 1px solid #d7d7d7; background: white; }
.table-cell {display: table-cell; padding: 10px 10px; position: relative; }
.table-cell span { display: none; font-weight: bold; }
.col-2  { width: 16.66%; }

Похоже, что браузер не отображает HTML, вставленный JavaScript. Но почему это происходит ...?

Я пытался заменить .inner HTML на .value, но это ничего не отображало.
Любые предложения очень ценятся. Спасибо!

Answer 1

Проблема была решена. Это было вызвано неправильным использованием тегов форматирования таблицы. Это привело к неправильному форматированию. Спасибо всем за предоставленные предложения!

Answer 2

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

1) Свойства ячейки / строки css вашей таблицы импортируются неправильно.

2) Являются ли свойства css родительской таблицы * переопределяют свойства своих детей.

Как подсказка, вы должны попытаться вставить эти элементы вне контекста вашей таблицы. Отображается ли стиль css автоматически? Если это так, то теперь вы знаете, что это как-то связано с родительскими divами. Если нет, то вы знаете, что проблема с дочерними элементами.