1

base.css次の CSS を持つ があります。

.table thead tr th, table th { 
    text-align:left; 
    font-size: 11px;
    font-weight: bold; 
    color: #333; 
    padding: 4px; 
    background-color: #EEE; 
    border: #FFF solid; 
    border-width: 1px 1px 0 0;  
    border-left: #e7e7e7; 
    white-space:nowrap;  }

この CSS を JSP に含めました。しかし、私は私のものとは異なる色が必要だったので、次のbase.cssように宣言しました:

#demo table.header tr {
    background:#FDBB30
}

私のJSPで。以前にこの問題に直面したことがあり、CSS の特異性について知りました。最初のものの特異性は0,0,1,5で、2 番目の特異性は です0,1,1,2。それによると、テーブルは 2 番目の CSS をレンダリングする必要があります。しかし、そうではありません。助言がありますか.. ？削除できませんbase.css。他の要素に必要です。

私のテーブルは次のようなものです：

<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
   <thead>
      <!-- Column Naming for the table -->
      <tr>
         <th class="header">SName</th>
         <th class="header">Report</th>
         <th class="header">Owner</th>
         <th class="header">STime</th>
         <th class="header">SFreq</th>
         <th class="header">SDate</th>
         <th class="header">EDate</th>
         <!-- <th>Action</th> -->
      </tr>
   </thead>
</table>
4

3 に答える 3

2

カスタム CSS を に適用する代わりにtr、 に適用しますth。このような：

#demo th.header {
   background:#FDBB30
}

また、HTML で、あなたまたはそれを含むaid="demo"のいずれかに使用していることを確認してください。tabledivtable

JSFiddle のこのデモが役立つ場合があります。

于 2013-08-29T06:35:13.790 に答える
1

このセレクターは間違っています

#demo table.header tr

まず第一に、demoそこで宣言された id が表示されません。これもtable.header正しくありません。つまり、クラスを選択することを意味しますtableが、そのクラスをセレクターにheader適用しているため、失敗します。th

classontable要素を呼び出す

<table class="header" cellpadding="0" cellspacing="0" border="0" align="left" width="100%" >

また、ラッパー要素があることを確認してください。たとえばdiv、IDがdemo

上記のことにはまだ慣れていません。好きなように使用しidてくださいtable

<table id="change_color" ...>

以下のセレクターを使用するよりも

#change_color thead tr {
   background: #f00;
}

デモ

于 2013-08-29T06:32:50.970 に答える