Javascript：使用 innerHTML 时忽略表格布局答案

【问题标题】：Javascript: table layout is ignored when using innerHTMLJavascript：使用 innerHTML 时忽略表格布局
【发布时间】：2020-03-31 19:54:52
【问题描述】：

当我使用 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 在 web 应用程序的其他地方使用没有问题。它也用于以这种方式显示列标题：

<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%; }

浏览器似乎没有呈现由 JavaScript 插入的 HTML。但是为什么会这样……？

我尝试将 .innerHTML 替换为 .value，但没有显示任何内容。
任何建议都受到高度赞赏。谢谢！

【问题讨论】：

搜索结果是什么？
您需要展示示例 HTML 和 CSS。没有它只是一个猜谜游戏。
看来您正在使用一些库来格式化您的表格，而不仅仅是纯 CSS。您需要在执行该库之前执行添加新表行的脚本，以便库找到并格式化它们。
值得一试的是制作 MRE：stackoverflow.com/help/minimal-reproducible-example 他们往往需要一些时间来制作，但一旦你有了其中一个，有人将能够相当轻松快捷地帮助你。
已更新以回答上面列出的问题。谢谢！

标签： javascript innerhtml

【解决方案1】：

有些东西会阻止您的表格行和表格单元格获取它们的 .css 属性。如果不知道您的 .css 文件和周围的上下文，很难猜出原因。但作为表面层面的猜测，请考虑查看

1) 您的表格单元格/行 css 属性未正确导入。

2) 父表的 css 属性是否覆盖其子表的属性。

作为提示，您应该尝试将这些 div 粘贴到表格上下文之外。 css 样式会自动显示吗？如果是这样，您现在知道这与父 div 有关。如果没有，您知道问题出在子 div 上。

【讨论】：

【解决方案2】：

问题已解决。这是由于不正确使用表格格式标签造成的。这导致格式不正确。感谢大家提供的建议！

【讨论】：