オーバーライド<tr>スタイリング​​sassを使用

Question

私は現在、バックグラウンドカラーの行を強調表示するレールアプリケーションに取り組んでいますが、それに加えて、その行内で別の色のデータセルを強調表示します。

私が持っている問題は、tdのスタイリングが無視されているように見えることです。私はちょうど行全体の背景色を取得します。

CSSクライアント側を調べると、私がtdに適用するスタイリングは単純に存在しないようです。

生成されたHTML

<table id="project-table" class="table table-hover"> 
    <thead> 
    <tr> 
     <th>Row</th> 
     <th>Fubar</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr class="clickable-row cheese"> 
     <td>Row 1</td> 
     <td class="'wibble'">Hello World</td> 
    </tr> 
    </tbody> 
</table> 

SASS

#project-table tbody tr.cheese { 
    background-color: yellow; 

    & td.wibble { 
    background-color: blue; 
    } 
} 

私が間違って何をしているのですか？

ps：ブートストラップ3を使用していますが、それはこの問題に関連しているとは思われません。 [OK]を[SOLVED]

UPDATE

は、私がブラインドされていた二重引用符の余分なセットがclass="'wibble'"のために生成されていたが実現しなかった表示されます - すぐにそれを指摘して@Dekelのおかげで、と私は本当の問題の原因を見つけることができます。

<td<%= ((index == @project.active_pattern_index) ? ' class="wibble"' : '').html_safe %>> 
    <%= pattern.row(count).instruction %> 
</td> 

Answer 1

tdタグでclassはwibble（とない'wibble'）する必要があります：私はhtml_safeとして出力をマークしなければならなかった余分な引用符の世代の問題を解決するために

。

あなたはクラスの属性クラス内の単一引用符を使用しないでください。''

<table id="project-table" class="table table-hover"> 
    <thead> 
    <tr> 
     <th>Row</th> 
     <th>Fubar</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr class="clickable-row cheese"> 
     <td>Row 1</td> 
     <td class="wibble">Hello World</td> 
    </tr> 
    </tbody> 
</table>