[Backport] Fix responsive tables showing broken heading

[ronak2ram]

Original Pull Request

#16517

Description

When no heading is present in the data-th attribute on a column for a responsive table in Magento, a blank colon is present. This is easily fixed by only showing the before css on an element with the data-th attribute present.

Before: http://take.ms/SoSdA
After: http://take.ms/KlVrK

Manual testing scenarios

Use the following markup on a blank or luma theme:

<div class="table-wrapper">
    <table class="data table">
        <thead>
            <tr>
                <th class="data-grid-th">State</th>
                <th class="data-grid-th">Signed Date</th>
                <th class="data-grid-th">Expiration Date</th>
                <th class="data-grid-th">Status</th>
                <th class="data-grid-th" colspan="3">&nbsp;</th>
            </tr>
        </thead>

        <tbody>
            <tr data-role="row">
                <td data-th="State">Iowa</td>
                <td data-th="Signed Date">2018-03-07</td>
                <td data-th="Expiration Date">2019-03-07</td>
                <td data-th="Status">Approved</td>
                <td>
                    <a target="_blank" href="javascript:void(0)">View Certificate</a>
                </td>
                <td>
                    <a href="javascript:void(0)">Renew Certificate</a>
                </td>
                <td>
                    <a href="javascript:void(0)">Delete Certificate</a>
                </td>
            </tr>
            <tr data-role="row">
                <td data-th="State">Maryland</td>
                <td data-th="Signed Date">2018-02-19</td>
                <td data-th="Expiration Date">9999-12-31</td>
                <td data-th="Status">Approved</td>
                <td>
                    <a target="_blank" href="javascript:void(0)">View Certificate</a>
                </td>
                <td>
                    <a href="javascript:void(0)">Renew Certificate</a>
                </td>
                <td>
                    <a href="javascript:void(0)">Delete Certificate</a>
                </td>
            </tr>
            <tr data-role="row">
                <td data-th="State">Washington</td>
                <td data-th="Signed Date">2018-02-16</td>
                <td data-th="Expiration Date">9999-12-31</td>
                <td data-th="Status">Approved</td>
                <td>
                    <a target="_blank" href="javascript:void(0)">View Certificate</a>
                </td>
                <td>
                    <a href="javascript:void(0)">Renew Certificate</a>
                </td>
                <td>
                    <a href="javascript:void(0)">Delete Certificate</a>
                </td>
            </tr>

        </tbody>
    </table>
</div>

Contribution checklist

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-engcom-team]

Hi @ronak2ram. Thank you for your contribution.
We will aim to release these changes as part of 2.1.15.
Please check the release notes for final confirmation.