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 ルール -- .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などです。

手でストライピングについては、はい、簡単です。.table-stripedこれは Bootstrap定義全体です。

.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 に答える