将表格分配给innerHtml会破坏网站

Question

我已经建立了一个计算结果页面。它基本上是DIV中的css网格。网格有三列。在每一列中都有包含表(显示结果)的tile (div)。

在JavaScript中，我计算结果表并将它们分配给表。在最外层有一个div，我将display设置为"table"

问题是:某些电脑上的某些浏览器显示一个很长的空白页面。在最后，我可以看到一些表，其余的都被剪辑了。

这可能发生在开始构建页面时，或者当我用新计算的表替换表时。

现在我发现了一个不满意的工作:在对div. innerhtml进行任何赋值之前，我将最外层div的显示设置为none。在赋值之后，我在0.5秒的setTimeout后将其设置回table，然后页面就可以正确构建了。

看起来，赋值后需要一些时间来构建内部DOM结构，但我不知道要等待任何事件。

下面是html结构的精髓:

<div style="display: table">
<div style="display: grid; grid-template-areas: 'left center right';">
<div style="grid-area: left">
<div id="result_table0"></div>
<div id="result_table1"></div>
</div>
<div style="grid-area: center">
<div id="result_table2"></div>
<div id="result_table3"></div>
</div>
<div style="grid-area: right">
<div id="result_table4"></div>
<div id="result_table5"></div>
</div>
</div>
</div>

表的Javascript赋值看起来像这样:

// calculation of the table
let my_result_table = '<table><tr><td>xxx</td><td>yyy</td></tr></table>';
// assignment to the div
document.getElementById('result_table0').innerHTML = my_result_table;

你知道这里出了什么问题吗?

Answer 1

使用cssdisplay: table/table-row/table-cell或display: grid在html中呈现表格式结构的一些提示

我在下面的代码片段中准备了一些示例来展示如何使用csstable和grid。

display: table可以应用于外部容器，它的子元素(通常在正常的<table><tr><td>...结构中作为"行")被赋予样式属性display: table-row。然后，这些行的子行(表的孙子，类似于常规table中的td元素)被赋予样式属性display: table-cells。

在下面的一些示例中，我展示了如何更改正常的层次结构，例如将"行"并排显示，或将"单元格"上下显示。

我还包含了一个简单有效的网格样式，单元格可以很容易地通过简单的网格模板调整大小。

一般来说，使用一个或另一个作为table选项样式，它们附加到元素，而grid指定如何放置子项。网格还有一个额外的优点，它允许将每个放置的项目设置为不同的显示类型，允许网格项目是网格容器、弹性盒子或任何最适合该项目样式的东西。如果templates的列和行包含在grid容器中，网格也很容易调整大小。

/* rules for table div, its children (rows) and its granchildren (cells)*/
.table {
display: table;
}
.table>div {
display: table-row;
}
.table>div>div {
display: table-cell;
}

div {
border: 1px solid black;
min-width:30px;
min-height:10px
}
h2 {
font-size: 18px;
margin-top: 50px;
margin-bottom: 0;
}

<h2>table, table-row, table-cell values of style display attribute </h2>
<p>1) divs formatted using display: [table/table-row/table-cell] set using inline style attributes </p>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">1</div>
<div style="display: table-cell;">2</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">3</div>
<div style="display: table-cell;">4</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">5</div>
<div style="display: table-cell;">6</div>
</div>    
</div>
<p>2) divs formatted using display: [table/table-row/table-cell] set using stylesheet css rules applied to class attribute of outer div and its descendents </p>
<div class="table">
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>3</div>
<div>4</div>
</div>
<div>
<div>5</div>
<div>6</div>
</div>    
</div>

<h2>display: grid example: </h2>
<p>divs formatted using display: grid with optional cell sizing within the row and column templates.</p>
<div style="display: grid; grid-template-rows: 30px 50px 30px; width: 50%;">
<div style="display: grid; grid-template-columns: 1fr 2fr;">
<div>1</div>
<div>2</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 2fr;">
<div>3</div>
<div>4</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 2fr;">
<div>5</div>
<div>6</div>
</div>

</div>
<h2> display: table/table-cell to place 'rows' side-by-side</h2>
<p>This example uses display: table-cell for both the children and grand-children of the table. It allows the children (normally considered rows) to be placed side-by-side. table-cells make the div behave as an inline-block</p>
<div style="display: table">
<div style="display: table-cell">
<div style="display: table-cell">1</div>
<div style="display: table-cell">2</div>
</div>
<div style="display: table-cell">
<div style="display: table-cell">3</div>
<div style="display: table-cell">4</div>
</div>
<div style="display: table-cell">
<div style="display: table-cell">5</div>
<div style="display: table-cell">6</div>
</div>
</div>
<h2>putting table-rows inside  (some) table-cells</h2>
<p>This example applies table-cell to the children of the table (normally considered rows) to place them side-by side. The grandchildren with display set to table-cell are placed side-by-side within the side-by-side children except for the middle child which has its children styled as table-rows (forcing them onto separate lines). Table-rows gives an inline-block type display to divs.</p>
<div style="display: table">
<div style="display: table-cell">
<div style="display: table-cell">1</div>
<div style="display: table-cell">2</div>
</div>
<div style="display: table-cell">
<div style="display: table-row">3</div>
<div style="display: table-row">4</div>
</div>
<div style="display: table-cell">
<div style="display: table-cell">5</div>
<div style="display: table-cell">6</div>
</div>
</div>
<h2>above-and-below table-rows inside table-cells</h2>
<p>The final example treats the children (usually rows) as table-cells, displaying them side-by-side but its children are displayed as table-rows, causing them to stack on top of each other </p>
<div style="display: table">
<div style="display: table-cell">
<div style="display: table-row">1</div>
<div style="display: table-row">2</div>
</div>
<div style="display: table-cell">
<div style="display: table-row">3</div>
<div style="display: table-row">4</div>
</div>
<div style="display: table-cell">
<div style="display: table-row">5</div>
<div style="display: table-row">6</div>
</div>
</div>

Answer 2

使用display: flex(或block)代替display: table