Correctly set size of plotly plot within an HTML table

Question

I want to use a table to correctly position some elements and plots in HTML. The problem is that when I position the plotly <div>...</div> inside a table cell the plot within that <div>...</div> stops rendering with the expected size. The problem disappears as soon as I take the plot outside of the table.

Code with no sizing issues:

var y0 = [];
var y1 = [];
for (var i = 0; i < 50; i ++) {
    y0[i] = Math.random();
    y1[i] = Math.random() + 1;
}

var trace1 = {
    y: y0,
    type: 'box',
    'showlegend': false
};

var data = [trace1];

Plotly.newPlot('myDiv', data, {margin: {l: 30, r: 10, b: 20, t: 20, pad: 4}}, {displayModeBar: false});

<head>
    <script src='https://cdn.plot.ly/plotly-2.3.1.min.js'></script>
</head>

<body>
   <div style="border: solid black 1px; width:95%" id='myDiv'>
       <!-- Plot div -->
   </div>
</body>

Code with incorrect sizing:

var y0 = [];
var y1 = [];
for (var i = 0; i < 50; i ++) {
    y0[i] = Math.random();
    y1[i] = Math.random() + 1;
}

var trace1 = {
    y: y0,
    type: 'box',
    'showlegend': false
};

var data = [trace1];

Plotly.newPlot('myDiv', data, {margin: {l: 30, r: 10, b: 20, t: 20, pad: 4}}, {displayModeBar: false});

<head>
    <script src='https://cdn.plot.ly/plotly-2.3.1.min.js'></script>
</head>

<body>
   <table border=1 style="width:100%">
       <tr>
           <td>Text or HTML element here!</td>

           <td>
               <div style="border: solid black 1px; width:100%"id='myDiv'>
                   <!-- Plot div -->
               </div>
           </td>
       </tr>
   </table>
</body>

When I inspect the document elements there seems to be a separate <div>...</div> of class user-select-none.svg-container which the browser shows as having a margin filling up the parent <div>...</div>, but whose actual value is an empty string.

I am aware of the negative reputation tables have for positioning (see this questions and links therein; also here), but since I am a novice in HTML/CSS/JS, I would like to try and understand the reason behind this behaviour.

Correctly set size of plotly plot within an HTML table

Code with no sizing issues:

Code with incorrect sizing:

0 Answers0