Setting up table class

I’m hoping this is a simple fix but I have been working on it for days and can’t quite get to a solution.

I am using 3 plugins, Site Origin Page Builder, Site Origin CSS and TeachPress.

1. I have some tables on https://sreal.ucf.edu/arvw/ using the accordion widget.

2. I have several publication pages using TeachPress, one example is: https://sreal.ucf.edu/publications/.

When I set up the tables in item 1 I added some CSS to add a border, padding and text alignment to the th and td, plus background color to the th which worked fine but it also added the same styling to item 2.

I have tried to add a within the accordion (for item 1) where the actual tables are set up.

The table class for the publication page is teachpress_publication_list.

When I try to use the table class to differentiate the 2 table classes and have different CSS styling for each, it is not working. It is treating all the tables the same. I am using table class because the publication page has a set table class that will work on all my publication pages.

The CSS I am using is:
.teachpress_publication_list th, td {
text-align: left;
border: none;
}
.arvw th,td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
.arvw th {
background-color: #b5b5b1;
}

It is only using the style for the ending table so in this case it is using arvw but if I move the teachpress… to the bottom it will use that one. It seems to me that it is not recognizing the class names I am using but these names seem like the right names based on what I can search online.

I am not a web designer and I’m sure I am missing something basic. Please help.