@amyleadem You know what, I agree that we should make the styles identical. Looking at the borderless table (for example), the top header says "Document Title" but there is no visual difference between it and the table headers beneath it. I think that's confusing; let's see what we think if it's a bit lighter.

As for the tfoot th, there's no good reason for me to think this issue would also not be important in the footer, so my feeling is that we do include it in the scope. Do you want to open comments to this end? Should we discuss maybe in office hours?

Hi, @amyleadem!

I've made a couple of changes with the hope of opening up the discussion on this issue once again. I say that because I sure don't think this is the end of this discussion, it touches too many things. I'll take your comments one-by-one. :)

1. Borderless: Right now, the borderless table headers do not match across thead and tbody. We should update the styles so that they match.

I have made them match, but I made the tbody match to the thead not the other way around. This means none of the th have a gray styling. Now that I re-read your comment, I'm not sure that's what you were thinking :).

Also, I overrode the style for usa-table--borderless mixin with

#tbody {
    th {
      background-color: #fff;
    }

to accomplish this. I took this approach because it looks like the default styling for tables is in usa-table, so I left the new styles there and overrode them when appropriate.

2. Striped: The striped styles in tbody th cells are confusing. They should probably just be the same single background color as the thead th cells.

I agree! I added this to the usa-table--striped mixin:

tr:nth-child(even) {
   td,
   th {
     background-color: #fff;
   }
 }

3. Stacked: The th cells appear to be receiving alternating background colors for their styles. We should standardize those.

They are standard now, again, I overrode the style to:

&:nth-child(odd),
    &:nth-child(even) {
      td,
      th {
        background-color: inherit;

so that the style is consistent.

I'm not 100% convinced this is the right approach to this, but it might be a way to at least resolve this issue for default tables. Perhaps we can discuss?

Lastly, I want to mention the issue you brought up about the tfoot. It doesn't seem like the twig file is even writing the <tfoot> tag, so before I spend any time moving styles around I thought I'd mention it.

:)

Cheers to you!
Cathy

@mahoneycm, @amyleadem
I want to try to move this forward, but I think we may need a larger discussion on the original issue and if this is the direction we want to take, I can't tell from this conversation how it was discussed and approved, I know it was cleared for dev on Jun 27, but am not sure what happened or if decisions were made about styling, etc. Should we bring it up again? I'm not even 100% sure there is an actual issue here, since I don't know with 100% certainty it's a requirement that they be physically different. Should we involve accessibility to try to figure it out?

I also created a test branch to show the table: https://github.com/uswds/uswds/tree/cb-test-table-headers-with-styling

Open the table and select table sortable.

@cathybaptista I believe was had agreed that row headers in tables should have the same TH styling as the column headers.

We looked at the W3 tables with irregular headers page as a reference for these styles.

I think this is something we should move forward with and your demo example looks good! Looking at the changed files in your repo, I'm hoping we can simplify the changes. Would you be able to do another pass of this work and see if there is a way to include row TH cells with fewer changed lines?

Happy to sync up if need be!

@cathybaptista I believe was had agreed that row headers in tables should have the same TH styling as the column headers.

We looked at the W3 tables with irregular headers page as a reference for these styles.

I think this is something we should move forward with and your demo example looks good! Looking at the changed files in your repo, I'm hoping we can simplify the changes. Would you be able to do another pass of this work and see if there is a way to include row TH cells with fewer changed lines?

Happy to sync up if need be!

@mahoneycm

Hi, Charlie!

I removed most of the styles I had modified as a result of this issue (#5986 being simplified to only address the th styling. However, I did leave in one additional style, which is part of the borderless table. The gray styling that is added to the base table is being applied to the borderless table and results in a border (or at least, a visual border because the background is gray.)

I changed the tbody th tags to white for the borderless table, but included the style with the th and td tags so that I wasn't declaring an entirely new style.

Let me know what you think of my solution. :)

Hi, @amyleadem . Thank you for your thorough review!

Federalist Link shows the latest changes. Not quite done yet!

f9279a3 addresses the striped table issue

e4934e8 addresses the white background (#fff) and stacked tables.

I haven't finished with the footer, it's easy enough to add it to the styles but I really don't want to just throw styles in there so I'm trying to figure out how to add them in a way that will not add any additional confusion. I'll get that to you as soon as possible!

@amyleadem I gave this some thought this weekend, we may want to talk as a group. Is the footer any different from the header? Can we set the tfoot in the table scss to extend thead? This may save some future headaches. :)

Update on 10/28: This isn't the issue. It's about creating a common th so we don't need to call out thead, tbody, tfoot.