0

スタイルなしでセレクターを削除すると、ストライピングテーブルのヘッダーが含まれるのはなぜですか？空のセレクターを削除すると、どのような影響がありますか？

これがcssです：

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

TABLE.spreadsheet //if we delete this selector  useless header becomes striped  too
{   
} //this selector seems useless at all


TABLE.spreadsheet TH
{
    background: #ccc;
    padding: 0px 3px;
    text-align: center;
    vertical-align: text-top;
}

TABLE.spreadsheet TD
{
    text-align: center;
    vertical-align: text-top;
    padding: 0px 3px;
    font-size: 14px;        
}

TABLE.spreadsheet .odd
{
  background-color: #ffefd5;        
}

これが表です：

<table class="spreadsheet" cellspacing = "0">
        <tr>
           <th></th>
           <th>Email Address</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Date</th>
           <th>Phone</th>
           <th>Action</th>          
        </tr>
        <tr>            
                                                    <td><input type="checkbox" name="bulk_select[]" id="bulk_select" value="2449831" class="bulk_select"></td>  

                                                        <td>test@gmail.com</td>

                                                        <td></td>

                                                        <td></td>

                                                        <td></td>

                                                        <td></td>


                <td>                        <a href="/lists/edit-subscriber?id=2449831">edit</a>&nbsp;&nbsp;&nbsp;

                    <a href="/lists/delete-subscriber?id=2449831" class="del_subscriber">delete</a></td>                            
            </tr>
                    <tr>            
                                                            <td><input type="checkbox" name="bulk_select[]" id="bulk_select" value="2449880" class="bulk_select"></td>  

                                                        <td>test48@gmail.com</td>

                                                        <td>Mark</td>

                                                        <td>Johnson</td>

                                                        <td></td>

                                                        <td></td>


                <td>                        <a href="/lists/edit-subscriber?id=2449880">edit</a>&nbsp;&nbsp;&nbsp;

                    <a href="/lists/delete-subscriber?id=2449880" class="del_subscriber">delete</a></td>                            
            </tr>
                    <tr>            
                                                            <td><input type="checkbox" name="bulk_select[]" id="bulk_select" value="2449881" class="bulk_select"></td>  

                                                        <td>test49@gmail.com</td>

                                                        <td>Chad</td>

                                                        <td>Davis</td>

                                                        <td></td>

                                                        <td></td>


                <td>                        <a href="/lists/edit-subscriber?id=2449881">edit</a>&nbsp;&nbsp;&nbsp;

                    <a href="/lists/delete-subscriber?id=2449881" class="del_subscriber">delete</a></td>                            
            </tr>

</table>

ストライピングテーブルへのJavaScript：

    $("table.spreadsheet tr:nth-child(odd)").addClass("odd");
4

2 に答える 2

1

私はあなたの質問を完全に理解しているかどうかはわかりませんが、私が理解している場合は、テーブルヘッダーにないテーブルセルに「奇数」クラスを追加したいですか？

もしそうなら、これを行います：

<table>
 <thead>
  <tr>
   <th></th>
   <th></th>
  </tr>
 </head>
 <tbody>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </tbody>
</table>

$("table.spreadsheet tbody tr:nth-child(odd)").addClass("odd");

さらに、これらのマージンタグをBODY要素から削除し、CSSを使用することをお勧めします。

また、CSSを別のスタイルシートに移動し、BODYタグ内に配置しないでください。ページに配置する必要がある場合は、STYLEタグ内のHEADタグ内に配置します。

最後に、これの代わりに：

TABLE.spreadsheet .odd
{
 background-color: #ffefd5;        
}

私はこれをします：

.odd
{
 background:#ffefd5;        
}
于 2012-11-26T10:33:19.753 に答える
1

次のような瞬間に、bodyタグ内にスタイルがあります。

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
TABLE.spreadsheet  {   
}

それらは次のように<style>タグ内にある必要があります。

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<style>
TABLE.spreadsheet  {   
} 

...

</style>

私の推測では、最初のセレクターを削除すると壊れてしまうのは、<style>それがスタイルであることをブラウザーに伝えていないため、タグのように機能しているためです。

于 2012-11-26T10:33:32.430 に答える