Adding Border Styling to Table Row Headings and Colum Headings

I would greatly appreciate some help with this, if possible. I'm trying to add some global CSS styling to tables that are automatically generated by our company platform's HTML editor, but running into some problems.

Two things I'm trying to achieve:

I'd like to add a thicker blue border to just the bottom of the first row designated as a header in the html. Example, to look something like this:

The other element I'm trying to achieve is only in instances when the table has a header column and not a header row, to add a thicker blue border at the top of the first row Example of what I'm hoping to achieve:

Adding my current HTML and CSS code below:

   table {
      overflow-x:auto;
      border-collapse: collapse;
      margin: 1.5rem 0 2.5rem 0; 
      width: 100% !important;
      caption-side: bottom;
      border-color: transparent;
    }
    
   td {
      text-align: left;
      vertical-align: top;
      padding: 10px 12px !important;
      border-bottom: 0.1rem solid #8A959E; 
      vertical-align: text-top;
    } 
    
    td ul li {
      margin-bottom: 0 !important;
    }
    
    td ol li {
      margin-bottom: 0 !important;
    } 
    
   td ul li::marker {
      font-size: 1.2rem !important;
      color: #2d3b45 !important;
    }
    
    td ol li::marker {
      font-size: 1rem !important;
      color: #2d3b45 !important;
    }
    
    
   th {
      border-bottom: 0.1rem solid #8A959E;
      padding: 16px 12px !important;
      vertical-align: text-top;
      text-align: left;
      font-weight: 800;
    }
    
   th[scope=col] {
      border-bottom: 0.1rem solid #2774ae;
      vertical-align: bottom;
      padding: 16px 16px 8px 16px !important;
    }
    
    th:first-child {
      border-bottom: 0.2rem solid #2774ae;
    }
    
    tbody tr:nth-child(even) {
      background-color: #f4f4f4;
    }
    
    
    th:first-child, td:first-child {
      padding-left: 1rem !important;
    }
    
    th:last-child, td:last-child {
      padding-right: 1.5rem !important;
    }
    
    caption {
      text-align: left;
      margin: 0.5rem 0;
      color: #595959;
      font-style: italic;
      padding: 0 15px !important;
    }

<h1>Row Heading</h1>
<table>
    <caption>caption</caption>
    <tbody>
        <tr>
            <th scope="col">Row Heading</th>
            <th scope="col">Row Heading</th>
            <th scope="col">Row Heading</th>
        </tr>
        <tr>
            <td>test content</td>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <td>test content</td>
            <td>test content</td>
            <td>test content</td>
        </tr>
    </tbody>
</table>
<h1>Column Heading</h1>
<table>
    <caption>caption</caption>
    <tbody>
        <tr>
            <th scope="row">Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <th scope="row">Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <th scope="row">Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
    </tbody>
</table>

Solution

Introduce a <thead> section for tables with header rows. That will help you distinguish between <th> cells which are in header rows and those which are not.

:root {
  --clr-dark-grey: #595959;
  --clr-mid-grey: #8A959E;
  --clr-pale-grey: #f4f4f4;
  --clr-blue: #2774ae;
}

table {
  margin: 1.5rem 0 2.5rem 0; 
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
}

/* defaults for all cells */
td, th {
  padding: 10px 12px;
  vertical-align: text-top;
  text-align: left;
  border-bottom: 0.1rem solid var(--clr-mid-grey); 
}

/* header cells */
th {
  font-weight: 800;
}

/* turn off the bottom border of the thead section, otherwise it obscures the top border of the tbody section */
thead tr:last-child th {
  border-bottom: 0;
}

/* blue top border for first row of tbody */
tbody tr:first-child td, tbody tr:first-child th {
  border-top: 0.1rem solid var(--clr-blue);
}

/* blue bottom border for last row of tbody */
tbody tr:last-child td, tbody tr:last-child th {
  border-bottom: 0.1rem solid var(--clr-blue);
}

tbody tr:nth-child(odd) {
  background-color: var(--clr-pale-grey);
}
    
caption {
  text-align: left;
  margin: 0.5rem 0;
  color: var(--clr-dark-grey);
  font-style: italic;
  padding: 0 15px;
}

<h1>Row Heading</h1>
<table>
    <caption>caption</caption>
    <thead>
        <tr>
            <th>Row Heading</th>
            <th>Row Heading</th>
            <th>Row Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test content</td>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <td>test content</td>
            <td>test content</td>
            <td>test content</td>
        </tr>
    </tbody>
</table>
<h1>Column Heading</h1>
<table>
    <caption>caption</caption>
    <tbody>
        <tr>
            <th>Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <th>Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <th>Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
    </tbody>
</table>

If you can’t change the HTML, you can use a combination of :not() and :has() to solve this.

:root {
  --clr-dark-grey: #595959;
  --clr-mid-grey: #8A959E;
  --clr-pale-grey: #f4f4f4;
  --clr-blue: #2774ae;
}

table {
  margin: 1.5rem 0 2.5rem 0; 
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
}

/* defaults for all cells */
td, th {
  padding: 10px 12px;
  vertical-align: text-top;
  text-align: left;
  border-bottom: 0.1rem solid var(--clr-mid-grey); 
}

/* header cells */
th {
  font-weight: 800;
}

/* blue bottom border for row headings */
th[scope=col] {
  border-bottom: 0.1rem solid var(--clr-blue);
}

/* for tables without row headings, blue top border for first row */
tbody:not(:has(th[scope=col])) tr:first-child td, tbody:not(:has(th[scope=col])) tr:first-child th {
  border-top: 0.1rem solid var(--clr-blue);
}

/* blue bottom border for last row of tbody */
tbody tr:last-child td, tbody tr:last-child th {
  border-bottom: 0.1rem solid var(--clr-blue);
}

tbody tr:nth-child(odd) {
  background-color: var(--clr-pale-grey);
}
    
caption {
  text-align: left;
  margin: 0.5rem 0;
  color: var(--clr-dark-grey);
  font-style: italic;
  padding: 0 15px;
}

<h1>Row Heading</h1>
<table>
    <caption>caption</caption>
    <tbody>
        <tr>
            <th scope="col">Row Heading</th>
            <th scope="col">Row Heading</th>
            <th scope="col">Row Heading</th>
        </tr>
        <tr>
            <td>test content</td>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <td>test content</td>
            <td>test content</td>
            <td>test content</td>
        </tr>
    </tbody>
</table>
<h1>Column Heading</h1>
<table>
    <caption>caption</caption>
    <tbody>
        <tr>
            <th scope="row">Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <th scope="row">Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
        <tr>
            <th scope="row">Column Heading</th>
            <td>test content</td>
            <td>test content</td>
        </tr>
    </tbody>
</table>