0

我想有一个 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 {}
4

1 回答 1

0

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

  • 使.active规则更具体（另外，考虑使其适用于td，因为我似乎记得工作比设置 a 更规律tr），
  • .table-striped从表中删除并添加您自己的条带化规则，或
  • !important如果您想对此进行核对，请添加。

网上有很多关于这方面的资源，例如理解 CSS 中的样式优先级：特异性、继承和级联。

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

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}
于 2012-10-11T20:02:08.563 回答