Assigning a table to innerHtml breaks web site

Question

I have build a result page for a calculation. It's basically a CSS-grid in a DIV. The grid has three columns. In each column there are tiles (divs) which contain tables (which show the results).

In JavaScript I calculate the result tables and assign them to the tables. There is an outermost div where I set display to "table".

Here is the problem: Some browsers on some computers present a long empty page. At the very end I can see a bit of tables, the rest is clipped.

This may happen at the beginning where build the page or when I replace a table by a newly calculated table.

For now I found an unsatisfying work around: Before any assignments to div.innerHtml I set display of the outermost div to none. After the assignments I set it back to table after a setTimeout of 0.5 sec. Then the page is built properly.

It looks like that after the assignments some time is needed to build the internal DOM structure but I don't know any event to wait for.

Here is the essence of the html structure:

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

The Javascript assignments of the tables looks similar like that:

// 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;

Any ideas what's going wrong here?

Answer 1

Some pointers on using css display: table/table-row/table-cell or display: grid to render table-like structures in html

I've prepared some examples in the following snippet to show how css table and grid can be used.

display: table can be applied to an outer container, its children elements (typically intended as 'rows' in a normal <table><tr><td>... structure) are given the style attribute display: table-row. In turn the children of the rows (grandchildren of the table, analagous to td elements in regular table parlance) are given the style attribute display: table-cells.

In some examples below, I show how the normal hierarchy can be changed, for example to display 'rows' side by side or 'cells' above-and-below each other.

I also include a simple effective grid styling where cells can be sized very easily with short simple grid-templates.

Generally speaking, use one or the other as the table options style the element they are attached to while grid specifies how child items will be placed. Grid has an added advantage of allowing every placed item to be set to different display types, allowing a grid item to be a grid container, a flex-box or whatever best suits styling of that item. Grid is also very easy to size if column and row templates are included for the grid container.

/* 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

Use display: flex (or block) instead of display: table .