Skip to main content
D
DeeMay
Known Participant
July 8, 2021
Answered

Creating a shaded row style for existing table?

  • July 8, 2021
  • 2 replies
  • 370 views

I inherited some projects with tables that use paragraph style in the first row, and it looks like shading was manually applied to the first rows. Now there's an accessiblity requirement to change the shading to a darker color. Does anyone have any specific details about how to set up a style with shading that will fill the row...without using a "TopRow" style? I took an existing TopRow style and tried editing it multiple times, but each time it caused me grief, as when I applied it to the first row, the dark fill was applied to all of the table and not just the first row. 

    This topic has been closed for replies.
    Correct answer KarenMinOR

    Hi DeeMay,

     

    If you apply the same definition or class to each table, you can accomplish this by defining the background-color element for your table's "heading" row.

    If you use a thead element:

    table.mytableclass thead tr td {
background-color: #58585b;
color: white;
}

    or, if you use the <th> tag:

    table.mytableclass tbody tr th {
background-color: #58585b;
color: white;
}

    Hope this helps! If you can post the HTML for a typical table, we might be able to help further.

    2 replies

    K
    KarenMinORCorrect answer
    Inspiring
    July 9, 2021

    Hi DeeMay,

     

    If you apply the same definition or class to each table, you can accomplish this by defining the background-color element for your table's "heading" row.

    If you use a thead element:

    table.mytableclass thead tr td {
background-color: #58585b;
color: white;
}

    or, if you use the <th> tag:

    table.mytableclass tbody tr th {
background-color: #58585b;
color: white;
}

    Hope this helps! If you can post the HTML for a typical table, we might be able to help further.

    D
    DeeMayAuthor
    Known Participant
    July 9, 2021

    Thanks! I will give this a tyr.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    July 9, 2021

    Can you post a screenshot of the stylesheet with the "TopRow" style you mention? I can't see anything called that in RH2019, so I'd like to confirm exactly where you're looking.

    D
    DeeMayAuthor
    Known Participant
    July 9, 2021

    Thank you for the reply,

    My question has changed a bit since yesterday, since I'm realizing that no matter what table style I select, the resulting display likely isn't going to be what's desired when applied to an existing table with a variety of previously applied formatting. It appears the previous author used the "Convert to Header" option for the first row of the tables which then applies a gray background. (It seems the gray background might be a default RH setting?) I need to darken the background for accessibility reasons and I see that can be done in the background panel for th. However, rather than do this for every topic that has a table I'm wondering if there is something I could add to the style sheet being used for the project to yield a darker background for the header row across any tables with header rows--any suggestions on that? Would it be possible for a table header background color in a project style sheet to override what appears to be a RH default setting for table headers?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices