你可以看到我使用和不使用bootstrap获得的表格样式的差异,但我想要相同的行为。
table styling without bootstrap
application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*= require_tree .
*/
@import "bootstrap-sprockets";
@import "bootstrap";
general.css
.pos { color: #000; }
.neg { color: #f00; }
h1 {
color:orange;
text-align: center;
}
table.listing{
background: #C3D9FF none repeat scroll 0% 0%;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:20px 20px 40px;
border-radius:10px;
}
table.listing tr.tr-head{
background: #fff;
color:#990a10;
font-weight:bold;
text-align:center;
}
table.listing .tr-head td{
padding:5px;
padding-left:10px;
}
table.listing .tr-odd{
background: #fff;
text-align:center;
padding:50px;
color:#27292b;
font-weight:600;
font-size:14px;
}
table.listing .tr-even{
background: #f1f6ff;
text-align:center;
padding:50px;
color:#27292b;
font-weight:600;
font-size:14px;
}
table.listing td.col-1{
width:10%;
padding: 5px;
padding-left:10px;
}
table.listing td.col-3{
width:13%;
padding: 5px;
padding-left:10px;
}
index.html.erb
<h1>361° YAZD Statement</h1>
<% balance = 0 %>
<table class="listing" align="center" width="100%" cellpadding="1" cellspacing="1">
<tr class="tr-head">
<td>Date</td>
<td>Description</td>
<td>Amount</td>
<td>Discount</td>
<td>Paid</td>
<td>Balance</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% @statements.each do |statement| %>
<tr class="tr-<%= cycle('odd', 'even') %>">
<td class="col-1"><%= statement.date %></td>
<td class="col-3"><%= statement.description %></td>
<td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td>
<td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td>
<td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td>
<% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %>
<% color = balance >= 0 ? "pos" : "neg" %>
<td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td>
</tr>
<% end %>
</table>
问题是当我导入bootstrap时缺少background属性;
table.listing{
background: #C3D9FF none repeat scroll 0% 0%;
}
如果有人能帮助我,我真的很感激!
答案 0 :(得分:0)
在HTML首次加载引导程序中,然后加载自定义样式表。像这样:
<!-- styles -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
当我昨天遇到同样的问题时,这解决了我的问题。
答案 1 :(得分:0)
div h1 {
color: orange;
text-align: center;
}
.pos {
color: #000;
}
.neg {
color: #f00;
}
.myTable {
background: #C3D9FF none repeat scroll 0% 0%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px 20px 40px;
}
.myTable .table,
.myTable tr {
border: 2px solid #C3D9FF;
}
.table.listing tr.tr-head {
background: #fff;
color: #990a10;
font-weight: bold;
border: 2px solid #C3D9FF;
}
.table.listing .tr-head td {
padding: 5px;
border: 2px solid #C3D9FF;
}
.table.listing .tr-odd {
background: #fff;
color: #27292b;
font-weight: 600;
font-size: 14px;
border: 2px solid #C3D9FF;
}
.table.listing .tr-even {
background: #f1f6ff;
color: #27292b;
font-weight: 600;
font-size: 14px;
border: 2px solid #C3D9FF;
}
.table.listing td.col-1 {
width: 10%;
padding: 5px;
border: 2px solid #C3D9FF;
}
.table.listing td.col-3 {
width: 13%;
padding: 5px;
border: 2px solid #C3D9FF;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<h1>361° YAZD Statement</h1>
<div class="table-responsive myTable">
<table class="table table-bordered listing text-center">
<tr class="tr-head">
<td>Date</td>
<td>Description</td>
<td>Amount</td>
<td>Discount</td>
<td>Paid</td>
<td>Balance</td>
</tr>
<tr class="tr-even">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-odd">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-even">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-odd">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
</table>
</div>
</div>
&#13;
您需要先将general.css
更改为general.css.scss
,然后将其与其他SCSS文件一起导入application.css.scss
(由于您使用的是SCSS,因此您应删除所有评论/ text /要求您拥有当前application.css.scss
的顶部):
@import "bootstrap-sprockets";
@import "bootstrap";
@import "general";
在进行这些更改后,您可能也应该重新启动服务器。