CSS divide child tr elements into groups based on td content

Question

Not sure of the proper title for this. I have a table where I can not edit the HTML.

I want to select the tr element that contains td colspan="7" and all of its siblings until the next tr element that contains td colspan+"7" so that I can add a color gradient border that begins and ends at the next tr element that contains td colspan="7". This is a responsive table.

I was able to select the first tr (which I envision as a header) using the following syntax but can't figure out how to select that and its tr siblings without the entire table being selected. This data changes so there are more or less tr elements below each "header". I think that rules out nth-child selectors.

I thought turning the first tr it into a header using the display property would get me on the right track but can't figure the rest out.

fiddle

tr td[colspan="7"] {
display: table-header-group;
}

To test I tried to change the background of the first child but had no luck using:

tr td[colspan="7"] > td:nth-child(1) {
background: blue;
}

CURRENT HTML STRUCTURE

<table>
  <tbody>
    <tr>
      <td class="topTdStyle" colspan="7"><b>Swimmer, 1</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle" colspan="7"><b>Swimmer, 2</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
  </tbody>
</table>

Answer 1

If we give the colspan td a background image (or possibly a top border, I haven't tried that) and the table a set of background images at the two sides and bottom (or ditto on border) then we get at least some division of the sections although the treatment of the linear gradient wont be exactly as you wanted it as there is a variable number of tds in each.

Here's what we get using the HTML given in the question:

table {
  background-image: linear-gradient(to bottom, red, blue), linear-gradient(to right, blue, red), linear-gradient(to bottom, blue, red);
  background-size: 2px calc(100% - 4px), calc(100% - 2px) 2px, 2px calc(100% - 4px);
  background-repeat: no-repeat;
  background-position: 0 2px, 0 calc(100% - 2px), calc(100% - 2px) 2px;
}

tr td[colspan="7"] {
  background-image: linear-gradient(to right, red, blue);
  background-size: calc(100% - 2px) 2px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

<table>
  <tbody>
    <tr>
      <td class="topTdStyle" colspan="7"><b>Swimmer, 1</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle" colspan="7"><b>Swimmer, 2</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
    <tr>
      <td class="topTdStyle"><b>Rank</b></td>
      <td class="topTdStyle"><b>Event</b></td>
      <td class="topTdStyle"><b>Best Time</b></td>
      <td class="topTdStyle"><b>Standard</b></td>
      <td class="topTdStyle"><b>P/F/T</b></td>
      <td class="topTdStyle"><b>Swim Date</b></td>
      <td class="topTdStyle"><b>Meet Name</b></td>
    </tr>
  </tbody>
</table>