Question

我希望有一个已经由twitter-bootstrap提供的条带表，然后另外只为某些行添加背景图像。图像将在整行中重复。问题是背景图像没有出现在条纹行中。然后我将图像添加到行的每个td内的div。这几乎完美，因为图像很小，所以你仍然可以看到条纹行中的阴影，因此仍然可以告诉行是条纹。这种方法的问题是图像会在单元格的末尾被切断，然后在下一个单元格中重新开始，因此它看起来非常不连贯。如果你很好奇图像是什么，它只是我设计的一个箭头（虽然图像将来可能会改变）。因此，我试图让箭头反复穿过整行。

有没有办法同时使用条纹表并将背景图像添加到行中？如果没有，是否有一种简单的方法可以手动进行条纹表？

这是我尝试使用的图片，但我只使用table而不是table-striped，因此丢失了我的交替条纹行：

<table class="table">
    <% @sessions.each do |session| %>
        <% if session.status == 0 %>
           <% classname = "active"  %>
        <% else %>
           <% classname = "noactive" %>
        <% end %>

        <tr class= <%= classname %> >
            <td><%= link_to session.name, "session_path"%></td>
            <td><%= link_to session.user, edit_user_path(session.user)%></td>
            <td><%= link_to "Details", details_path, :class => "btn btn-mini" %></td>
        </tr>
    <% end %>
</table>

这是尝试在td级添加：

<table class="table table-striped">
    <% @sessions.each do |session| %>
        <% if session.status == 0 %>
           <% classname = "active"  %>
        <% else %>
           <% classname = "noactive" %>
        <% end %>

        <tr >
            <td><div class= <%= classname %>><%= link_to session.name, "session_path"%></div></td>
            <td><div class= <%= classname %>><%= link_to session.user, edit_user_path(session.user)%></div></td>
            <td><div class= <%= classname %>><%= link_to "Details", details_path, :class => "btn btn-mini" %></div></td>
        </tr>
    <% end %>
</table>

我的css看起来像这样：

.active {
  background-image:url(/assets/my_arrow.gif);
  background-repeat: repeat-x, no-repeat;
  background-position: center;
}
.noactive {}

Answer 1

这是因为Bootstrap表条带规则 - .table-striped tbody tr:nth-child(odd) td - 比您的.active规则更具体。你可以：

使.active规则更具体（同时，请考虑将其应用于td，因为我似乎记得比定型tr更经常地工作），
从表中删除.table-striped并添加您自己的条带规则，或
添加!important，如果您想要了解它的话。

网上有很多关于此的资源，例如Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade。

至于手工剥离，是的，这很容易。这是整个Bootstrap .table-striped定义：

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

Rails Bootstrap表条带不能为条带行添加额外的背景

1 个答案: