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


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

[code]

    <table>
      <thead>
        <tr>
          <th>★</th>
          <th>大阪</th>
          <th>沖縄</th>
          <th>東京</th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
    
    
    ├───┬───┬───┬───┬───┬───┬───┤
    │ ★　   │大阪    │沖縄   │東京 │
    ├───┼───┼───┼───┼───┼───┼───┤
    
[/code]

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

[code]

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




javascriptで書いてみましたが、別の方法が良いと思います。  
以下のコードは、tableタグより後に置かないと動きません。

[code]

    var th_elem = document.querySelectorAll('th');
    var text_th;
    var css_str = '<style>';
    for(var i = 0; i < th_elem.length; i++) {
        text_th = th_elem[i].textContent;
        if((text_th !== "") && (text_th !== "*")){
            css_str += 'td:nth-of-type('+(i+1)+'):before { content: "'+text_th+'";}\n';
        }
    }
    css_str += '</style>';
    document.write(css_str);
    
[/code]




javascriptで書いてみましたが、別の方法が良いと思います。  
以下のコードは、tableタグより後に置かないと動きません。

[code]

    var th_elem = document.querySelectorAll('th');
    var text_th;
    var css_str = '<style>';
    for(var i = 0; i < th_elem.length; i++) {
        text_th = th_elem[i].textContent;
        if((text_th !== "") && (text_th !== "*")){
            css_str += 'td:nth-of-type('+(i+1)+'):before { content: "'+text_th+'";}\n';
        }
    }
    css_str += '</style>';
    document.write(css_str);
    
[/code]

