试图让数字右对齐单元格中的右填充

我试图获得以下效果，其中单元格中的数值条目右对齐，但使用了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

试图让数字右对齐单元格中的右填充

回答

相关问题