HTML Table header tag does not format properly on new Map Viewer

[ericsamson_tract]

HTML th tags do not work correctly in the new map viewer, but work fine within the old viewer. Attaching sample code here. The headers all stack at the top of the html, which causes the td to be stacked underneath all of the th tags.

<table style="width: 99%; border-collapse: collapse;">

<tr>
    <th colspan="2" style="padding: 8px; text-align: left; border-bottom: 2px solid #555; background-color: #333; color: white; font-weight: bold;">
        Group 1 <span style="color: #a2d2ff;">&#9679;</span>
    </th>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 1</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_1}</td>
</tr>
<tr>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 2</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_2}</td>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 3</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_3}</td>
</tr>
    <th colspan="2" style="padding: 8px; text-align: left; border-bottom: 2px solid #555; background-color: #333; color: white; font-weight: bold;">
        Group 2 <span style="color: #a689f5;">&#9679;</span>
    </th>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 1</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_1}</td>
</tr>
<tr>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 2</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_2}</td>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 3</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_3}</td>
</tr>
    <th colspan="2" style="padding: 8px; text-align: left; border-bottom: 2px solid #555; background-color: #333; color: white; font-weight: bold;">
        Group 3 <span style="color: #a689f5;">&#9679;</span>
    </th>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 1</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_1}</td>
</tr>
<tr>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 2</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_2}</td>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 3</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_3}</td>
</tr>
<tr>
    <th colspan="2" style="padding: 8px; text-align: left; border-bottom: 2px solid #555; background-color: #333; color: white; font-weight: bold;">
        Group 4 <span style="color: #fa5050;">&#9679;</span>
    </th>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 1</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_1}</td>
</tr>
<tr>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 2</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_2}</td>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 3</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_3}</td>
</tr>

<tr>
    <th colspan="2" style="padding: 8px; text-align: left; border-bottom: 2px solid #555; background-color: #333; color: white; font-weight: bold;">
        Group 5 <span style="color: #b9f5a6;">&#9679;</span>
    </th>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 1</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_1}</td>
</tr>
<tr>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 2</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_2}</td>
</tr>
<tr style="background-color: #f2f2f2;">
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd; border-right: 1.4px solid #ddd; font-weight: 550;">field 3</td>
    <td style="padding: 8px; text-align: left; border-bottom: 1.4px solid #ddd;">{field_3}</td>
</tr>

 Results:

Results in old map viewer:

[timcneil · Accepted solution]

Hi @ericsamson_tract , 

Sorry that you're experiencing difficulties. I tested this out and I believe that this may be a known limit for now with our rich text editor. It doesn't seem to allow you to set multiple header rows within a single table seperated by non-header rows. 

As a workaround, I would suggest using multiple <table> figures within your rich text element. This will achieve the same look in your pop-up as displayed in the Map Viewer Classic pop-up. 

The code would look something like this (this is only for two tables): 

<figure class="table">
    <table style="border-collapse:collapse;" width="99%">
        <thead>
            <tr>
                <th style="background-color:#333;border-bottom:2px solid #555;color:white;padding:8px;text-align:left;" colspan="2">
                    <strong>Group 1 </strong><span style="color:#a2d2ff;"><strong>●</strong></span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color:#f2f2f2;">
                <td style="border-bottom:1.4px solid #ddd;border-right:1.4px solid #ddd;font-weight:550;padding:8px;text-align:left;">
                    field 1
                </td>
                <td style="border-bottom:1.4px solid #ddd;padding:8px;text-align:left;">
                    abc
                </td>
            </tr>
            <tr>
                <td style="border-bottom:1.4px solid #ddd;border-right:1.4px solid #ddd;font-weight:550;padding:8px;text-align:left;">
                    field 2
                </td>
                <td style="border-bottom:1.4px solid #ddd;padding:8px;text-align:left;">
                    abc
                </td>
            </tr>
            <tr style="background-color:#f2f2f2;">
                <td style="border-bottom:1.4px solid #ddd;border-right:1.4px solid #ddd;font-weight:550;padding:8px;text-align:left;">
                    field 3
                </td>
                <td style="border-bottom:1.4px solid #ddd;padding:8px;text-align:left;">
                    abc
                </td>
            </tr>
        </tbody>
    </table>
</figure>
<figure class="table">
    <table style="border-collapse:collapse;" width="99%">
        <thead>
            <tr>
                <th style="background-color:#333;border-bottom:2px solid #555;color:white;padding:8px;text-align:left;" colspan="2">
                    <strong>Group 2 </strong><span style="color:#a2d2ff;"><strong>●</strong></span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color:#f2f2f2;">
                <td style="border-bottom:1.4px solid #ddd;border-right:1.4px solid #ddd;font-weight:550;padding:8px;text-align:left;">
                    field 1
                </td>
                <td style="border-bottom:1.4px solid #ddd;padding:8px;text-align:left;">
                    abc
                </td>
            </tr>
            <tr>
                <td style="border-bottom:1.4px solid #ddd;border-right:1.4px solid #ddd;font-weight:550;padding:8px;text-align:left;">
                    field 2
                </td>
                <td style="border-bottom:1.4px solid #ddd;padding:8px;text-align:left;">
                    abc
                </td>
            </tr>
            <tr style="background-color:#f2f2f2;">
                <td style="border-bottom:1.4px solid #ddd;border-right:1.4px solid #ddd;font-weight:550;padding:8px;text-align:left;">
                    field 3
                </td>
                <td style="border-bottom:1.4px solid #ddd;padding:8px;text-align:left;">
                    abc
                </td>
            </tr>
        </tbody>
    </table>
</figure>

[ericsamson_tract]

Awesome, thanks Tim! That's a good work around.