5

Bootstrap css lib を使用しています。この lib を使用してストライプ テーブルを作成する方法は知っていますが、ストライプ div を作成する方法を教えてください。

たとえば、テーブルでは次のようにします。

<table id="newtable" class="table table-bordered table-striped fixedtable">
    <thead>
        <th>Date</th>
        <th>Info</th>
        <th>Price</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">                
                <div>text 1</div> 
                <div>text 2</div>  
                <div>text 3</div>  
                <div>text 4</div>                                
            </td>
        </tr>
    </tbody>    
</table>

そして、次のような div でその「スタイリング」を繰り返す必要があります。

<div class="row"><div class="col">Text 1 White BG</div></div>
<div class="row"><div class="col">Text 2 Grey BG</div></div>
<div class="row"><div class="col">Text 3 White BG</div></div>
<div class="row"><div class="col">Text 4 Grey BG</div></div>

質問は: 作り方:<div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div>ストライプ?

4

3 に答える 3

8

使用するtd div:nth-of-type(odd|even)

次の CSS3 の例は、最新のブラウザーで動作します

<style>
td div:nth-of-type(odd) {
    background: #e0e0e0;
}
td div:nth-of-type(even) {
    background: #FFFFFF;
}
</style>
<table id="newtable" class="table table-bordered table-striped fixedtable">
    <thead>
        <th>Date</th>
        <th>Info</th>
        <th>Price</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">                
                <div>text 1</div> 
                <div>text 2</div>  
                <div>text 3</div>  
                <div>text 4</div>                                
            </td>
        </tr>
    </tbody>    
</table>
于 2015-04-08T09:39:14.933 に答える
1

Twitter Bootstrap のストライピングは、テーブルの行に対してのみ機能します。したがって、div をストライプするには、それぞれを新しい行に追加する必要があります。例えば：

    <tr>
        <td>
            <div>text 1</div> 
        </td>
    </tr>
    <tr>
        <td>
            <div>text 2</div>  
        </td>
    </tr>
    ...

また、あなたが何を達成しようとしているのかわかりませんcolspan="3"。td適切なテーブルを作成する場合は、列ごとに新しいテーブルを作成する必要があります。例えば：

    <tr>
        <td>2013-07-22</td>
        <td>Text for info field 1</td>
        <td>9.99</td>
    </tr>
于 2013-07-22T08:21:06.853 に答える