セル内の右パディングと右揃えの数字を取得しようとしています

Question

セルの数値エントリが右揃えで、右パディングが25pxの次のような効果を得ようとしています。私のテンプレートで1：

何らかの理由

、私はパディングの設定を上書きするように見えることはできません。

数字はパディング - ライトなしで終わります。 （何を上記のサンプルで確認すると、以下に述べるように点検してCSSを微調整の結果であった）

ビューコードが

<div class="field"> 
     <td><%= :number_of_rolls_fill %></td> 
     <span class="number_right"> <td><%= @bedsheet_line.number_of_rolls_fill %></td></span> 
    </div> 
    </tr> 

用途レールapplication.cssでCSS（ありますテンプレートに加えてカスタムCSSの場合）

.number_right { 
    /* used to right align numbers in table cells */ 
    margin: 0 !important; 
    padding: 0 !important; 
    text-align: right !important; 
    padding-right: 25px !important; 
} 

これについてはさまざまなバリエーションを試しました。

私が検査をする場合、私はパッドのチェックを外すと、両方の領域の1pxが表示され、私が望む効果が得られることがわかりました。

私のスタイルシートは、私はおそらく、アプリの他の地域での問題を引き起こす私は私のスタイルシートを変更して欲しいけど効果を得ることができる

.art-article th, .art-article td 
{ 
    padding: 1px !important; 
    vertical-align: top; 
    text-align: left; 
} 

.art-article th 
{ 
    text-align: center; 
    vertical-align: middle; 
    padding: 1px !important; 
} 

pre 
{ 
    overflow: auto; 
    padding: 0.1em; 
} 

.preview-cms-logo 
{ 
    border: 0; 
    margin: 1em 1em 0 0; 
    float: left; 

を持っています。

Answer 1

が現在に近い作業サンプルです：

.art-article td .number_right { 
    /* used to right align numbers in table cells */ 
    margin: 0 !important; 
    padding: 0 !important; 
    text-align: right !important; 
    padding-right: 25px !important; 
} 

また、スパンが<td>要素内にある必要がありますコード。それはあなたのCSSを使用し、ビューのみを変更します。ここで

/* css */ 
td.number_right { 
    /* used to right align numbers in table cells */ 
    margin: 0 !important; 
    padding: 0 !important; 
    text-align: right !important; 
    padding-right: 25px !important; 
} 

# view 
    <tr> 
     <td><%= :number_of_rolls_fill %></td> 
     <td class="number_right"><%= @bedsheet_line.number_of_rolls_fill %></td> 
    </tr> 

は結果を示すjsfiddleあります。

<div class="field">と<span class="number_right">を取り除き、number_rightクラスをテーブルセルに直接適用できます。構文がかなり前になっていなかったので、これはこれをきれいにするでしょう。また、テーブルセル内のスパンを移動した場合は、widthまたはdisplay: block;を正しく設定する必要があります。 TD内部スパンで

例：

/* css */ 
td span.number_right { 
    /* used to right align numbers in table cells */ 
    margin: 0 !important; 
    padding: 0 !important; 
    text-align: right !important; 
    padding-right: 25px !important; 
    display: block; 
} 

# view 
<td><span class="number_right">$80</span></td> 

Answer 2

あなたは、特にその要素をターゲットにする必要があります。

ここ<td><span class="number_right"> <%= @bedsheet_line.number_of_rolls_fill %></span></td>