テーブルthタグの内容を取得して、動的にCSS設定したい

下記thタグより表示文字を取得して、

<table>
  <thead>
    <tr>
      <th>★</th>
      <th>大阪</th>
      <th>沖縄</th>
      <th>東京</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>


├───┬───┬───┬───┬───┬───┬───┤
│ ★　   │大阪    │沖縄   │東京 │
├───┼───┼───┼───┼───┼───┼───┤

　　
下記CSSを動的生成するには、どうすれば良いでしょうか？

td:nth-of-type(2):before { content: "大阪";}
td:nth-of-type(3):before { content: "沖縄";}
td:nth-of-type(4):before { content: "東京";}