見出し列を追加するには、HTMLとCSSを以下のように修正してください。

修正後のイメージはこちらです

▼https://sb-draft-preview.squadbeyond.com/articles/KmOgQBbelwwwWSIQ/draft?token=9e57f99e6d620cabfd884670aa70d1a1

▪️HTML

基本的にtrタグ（not閉じtrタグ）の下にthタグを入れていただければ、見出しの1マスを作成できます。各行に同じマスがないと崩れることに注意してください。

【修正前】

    <table class="table">
        <thead>
            <tr><!-- テーブル内の列を増やす場合は、すべての行のth要素とtd要素を同じ数だけ増やしてください -->
                <th class="medal"><img src ~~~
<div class="tbl-3col__ranking">
〜〜
<tr>
<td>
<p class="c-review__ttl">見出し</p>
<p class="c-review__cont"><span class="c-cont__text">内容</span></p>
<p class="c-review__subtext">サブテキスト</p>
</td>
〜〜

【修正後】

① 最初の<tr> の後に、<th class=”none”></th> を追加します

② 以下7箇所の<tr> の後に、それぞれ<th>項目名</th> を追加します

<div class="tbl-3col__ranking">
    <table class="table">
        <thead>
            <tr><!-- テーブル内の列を増やす場合は、すべての行のth要素とtd要素を同じ数だけ増やしてください -->
<th class="none"></th> /*追加*/
                   <th class="medal"><img src ~~~
〜〜
<tr>
<th>項目名</th> /*追加　以下7箇所の<tr> の後に、それぞれ<th>項目名</th> を追加してください*/　
<td>
<p class="c-review__ttl">見出し</p>
<p class="c-review__cont"><span class="c-cont__text">内容</span></p>
<p class="c-review__subtext">サブテキスト</p>
</td>
〜〜

▪️ CSS

【修正前】

 .tbl-3col__ranking .table {
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid #ccc;　変更
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}
 .tbl-3col__ranking .table th,
 .tbl-3col__ranking .table td {
  width: 33.33%;
  min-width: 96px;
  text-align: center;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;　変更
  border-bottom: 1px solid #d9d9d9;　
  border-top: none;　一行消す
  padding: 12px;
  vertical-align: middle;
  box-sizing: border-box;
}

【修正後】

.tbl-3col__ranking .table {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #ccc; 変更
  border-right: 1px solid #d9d9d9;　一行追加
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}
 .tbl-3col__ranking .table th,
 .tbl-3col__ranking .table td {
  width: 33.33%;
  min-width: 96px;
  text-align: center;
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;　変更
  border-bottom: 1px solid #d9d9d9;
  padding: 12px;
  vertical-align: middle;
  box-sizing: border-box;
}
/*以下追加*/
.tbl-3col__ranking .table th.none {
  border-left: none;
  border-top: none;
}