Fix responsive tables showing broken heading

[LordZardeck]

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

All committers have signed the CLA.

[magento-engcom-team]

Hi @LordZardeck. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me {$VERSION} instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[magento-engcom-team]

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

Please, consider to port this solution to 2.3 release line.
You may use Porting tool to port commits automatically.