I have an app that changes the text in the Legend window based on what the user selects. That seems to work fine for text of any size. But 2 of the legends include a small table. That table is showing up without any formatting. The code is rather simple.
<div style= "position: fixed; Top: 55px; right: 20px;" >
<div class="legend-container">
<div class="title">{{legendTitle}}</div>
<div #graphOverviewComponentRef id="legend-overview-component">
<p [innerHTML]="queryInfo"></p>
</div>
</div>
</div>
</div>
queryInfo contains a table. This is the cut down version.
<!DOCTYPE html><html><head><style>table {font-family: arial, sans-serif; border-collapse: collapse; width: 150;}td, th { border: 1px solid #dddddd;text-align: left; padding: 8px; font-size: .8em;}tr:nth-child(even) {background-color: #8C8CD9;}</style></head><body><table><tr><th>Var</th><th>Value</th><th>Var</th><th>Value</th></tr><tr><td>Bus User</td><td>Logon </td><td>interest</td><td>Violations</td></tr><tr><td>Query</td><td>undefined </td><td>Organization</td><td>all</td></tr><tr><td>Vendor</td><td>all </td><td>Source</td><td>SonarCube</td></tr><tr><td>Status</td><td>Login </td><td></td><td></td></tr></table></body></html>
When I paste that into the stream inline, it shows up perfectly (cut down a bit)
<div #graphOverviewComponentRef id="legend-overview-component">
<!DOCTYPE html><html><head><style>table {font-family: arial, sans-serif; ..............
</div>
So my HTML does not seem to be the problem. So why is innerHTML not formatting the table ?
Thanks
question from:
https://stackoverflow.com/questions/65939332/using-table-formatting-inside-innerhtml 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
