試圖讓數字右對齊單元格中的右填充

我試圖獲得以下效果，其中單元格中的數值條目右對齊，但使用了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;

我大概可以得到我想要改變我的樣式表的效果，但我會導致應用程序的其他方面的問題。

來源

2016-12-28 Chris Mendla

也許它與結構呢？這裏'div.field'在做什麼？ –

這裏是工作示例接近於當前的碼。它使用你的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>

來源

2016-12-28 19:59:08 user3366016

td中的最後一個例子爲我工作。 –

你需要明確指定元素：

.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>的元素：

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

來源

2016-12-28 19:48:24

試圖讓數字右對齊單元格中的右填充

回答

相關問題