一种方法是检索…

• 在第一步骤中，列特定类名（作为类名数组的数组），同时还考虑col-elements span-属性。
• 在最后一步中，当迭代特定表行的直接子元素时，通过将当前元素的类名与其相关列元素的类名合并来创建每个子元素的有效类名数组（这次考虑子元素的colSpan-属性）。

function getColumnSpecificClassNames(elmTable) {
  return [
    ...elmTable
      .querySelectorAll('colgroup > col')
  ]
  .reduce((result, { span, classList }) => {

    while (span--) {
      result
        .push([...classList]);
    }
    return result;

  }, []);
}
function getRowChildrenEffectiveClassNames(elmTr) {
  const columnClassLists = getColumnSpecificClassNames(
    elmTr.closest('table')
  );
  return [
    ...elmTr.children
  ]
  .reduce(({ result, colCount = 0 }, { colSpan, classList }) => {

    result
      .push([...columnClassLists[colCount], ...classList]);

    return { result, colCount: colCount + colSpan };

  }, { result: [] }).result;
}

console.log(
  'column specifc class names ...',
  getColumnSpecificClassNames(
    document.querySelector('table')
  ),
)
console.log(
  'row children effective class names ...',
  getRowChildrenEffectiveClassNames(
    document.querySelector('table > tbody > tr')
  ),
)

.batman {
  background-color: #d7d9f2;
}
.flash {
  background-color: #ffe8d4;
}

caption {
  padding: 8px;
  caption-side: bottom;
}
table {
  width: 49%;
  border-collapse: collapse;
  border: 2px solid rgb(100, 100, 100);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 0.7rem;
}
td,
th {
  border: 1px solid rgb(100, 100, 100);
  padding: 10px 10px;
}
td {
  text-align: center;
}
.as-console-wrapper {
    left: auto!important;
    min-height: 100%;
    width: 50%;
}

<table>
  <caption>
    <p>Superheros and sidekicks<P>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup">
      https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup
    </a>
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col" class="robin">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col" class="kid-flash">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

如果我理解正确的话，您可以在父<tr>中搜索目标<th>的索引。然后循环遍历每个<col>并跟踪（number + span）。如果它超过了之前找到的索引，那么就得到了正确的<col>

const th = document.querySelector('.special_th');
const th_row_index = Array.from(th.parentNode.children).indexOf(th)
const all_col = [ ...document.querySelectorAll('colgroup > col') ];

let n = 0;
console.log('Searching for matching <col> that belonges to the <th> on index', th_row_index)
for (let c = 0; c < th_row_index; c++) {
    n += all_col[c].span;
    if (th_row_index <= n) {
        console.log('Found matching <col> with the following class:', all_col[c].className);
        break;
    }  
}

table, th, td {
  border: 1px solid black;
}

.special_th {
  color: purple;
}

<table>
  <colgroup>
    <col class="special_col_1" span="2" style="background-color:red">
    <col class="special_col_2" style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th class="special_th">Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

你可以给你想要的colgroup分配一个'id'，然后用途：
const colGroup = document.getElementById("yourId")
const yourClasses = colGroup.classList。
它将返回一个包含所有元素类的数组。