TP: fixes table headers in cdn snapshot view

[mitchell852]

What does this PR (Pull Request) do?

On the CDN snapshot view page, this change adjusts column headers when tab is selected and data table is visible to ensure the table header widths are correct.

• This PR fixes TP: table header in CDN Snapshot diff page is screwed up #3863

Which Traffic Control components are affected by this PR?

• Traffic Portal

What is the best way to verify this PR?

1. Navigate to https://localhost:8442/#!/cdns/1/config/changes
2. click on the tabs and ensure the column headers of each table are the correct width

Verifying the widths of column headers depends on the user's window size so can't think of a way to test this programatically.
Documentation is already correct.
No need for a change log entry

If this is a bug fix, what versions of Traffic Control are affected?

• master (aea858f)
• 3.0.2
• 2.2.2

The following criteria are ALL met by this PR

• This PR includes tests OR I have explained why tests are unnecessary
• This PR includes documentation OR I have explained why documentation is unnecessary
• This PR includes an update to CHANGELOG.md OR such an update is not necessary
• This PR includes any and all required license headers
• This PR ensures that database migration sequence is correct OR this PR does not include a database migration
• This PR DOES NOT FIX A SERIOUS SECURITY VULNERABILITY (see the Apache Software Foundation's security guidelines for details)

[asf-ci]

Refer to this link for build results (access rights to CI server needed):
https://builds.apache.org/job/trafficcontrol-PR/4385/

[ocket8888]

Table headers are still incorrect when the tab is first loaded; if you click on a different tab and then the one you were just on again, then it's fixed. But again, still wrong on initial load.

[asf-ci]

Refer to this link for build results (access rights to CI server needed):
https://builds.apache.org/job/trafficcontrol-PR/4399/

[mitchell852]

ers are still incorrect when the tab is first loaded; if you click on a different tab and then the one you were just on again, then it's fixed. But again, still wrong on initial load.

try now. not very proud of this hack but seems to work for me in chrome and firefox.

[asf-ci]

Refer to this link for build results (access rights to CI server needed):
https://builds.apache.org/job/trafficcontrol-PR/4415/

[asf-ci]

Refer to this link for build results (access rights to CI server needed):
https://builds.apache.org/job/trafficcontrol-PR/4416/

[ocket8888]

I don't generally like using scripts to fix styling; styling should fix styling. What's wrong with:

div.dataTables_scrollHeadInner {
    width: 100% !important;
}

?

[mitchell852]

I don't generally like using scripts to fix styling; styling should fix styling. What's wrong with:

div.dataTables_scrollHeadInner {
    width: 100% !important;
}

?

I can give it a shot. I was under the impression this bug was due to the datatables not being visible because they are hidden inside of tabs.

[mitchell852]

i definitely like that solution better but the column headers are not quite right

[ocket8888]

hm... I guess it's setting the widths explicitly, but just doing it wrong and never updating it. jQuery libraries..... Anyway, the little hiccup the page does when using a script to fix it is annoying, but if the CSS can't work properly I guess we've got no choice but to live with it until we eventually switch to Angular 7.

[ocket8888]

tests pass, fixes the issue, no _.js dependency 👍