2010-10-14 21 views
7

Próbowałem użyć jquery, ale nie mogłem przesłonić właściwości width klasy .gridHeader.Jak przesłonić właściwość css?

Chciałbym poprawić (powiedzmy 100px) szerokość pierwszej kolumny w tabeli.

<html> 
    <head> 
     <style> 
      html, body { 
       font-family:Tahoma; 
       font-size:11px; 
      } 
      .grid { 
       border-left:1px solid #CCCCCC; 
       border-top:1px solid #CCCCCC; 
      } 
      .gridHeader { 
       background-color:#EFEFEF; 
       border-bottom:1px solid #CCCCCC; 
       font-weight:bold; 
       height:20px; 
       padding-left:3px; 
       text-align:left; 
       width:100%; /* problematic, that I cannot change*/ 
      } 
      table.grid > tbody > tr > td { 
       border-bottom:1px solid #CCCCCC; 
       border-right:1px solid #CCCCCC; 
       padding:3px; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $(".gridHeader").css("width",""); 
      }); 
     </script> 
    </head> 
<body> 
    <table width="100%"> 
     <tr> 
      <td class="gridHeader" style="width:100px">Vikas 
      </td> 
      <td class="gridHeader">Vikas Patel Vikas Patel Vikas Patel 
      </td> 
      <td class="gridHeader">Vikas Patel Vikas Patel 
      </td> 
     </tr> 
     <tr> 
      <td>Vikas 
      </td> 
      <td>Vikas Patel Vikas Patel Vikas Patel 
      </td> 
      <td>Vikas Patel Vikas Patel 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 

Odpowiedz

12

Trzeba usunąć styl inline z removeAttr a następnie użyć metody css() takiego:

$(".gridHeader").removeAttr('style').css("width","100px"); 

Jeśli chcesz zastosować szerokość do tylko pierwszej kolumny, można użyć filtru :first selektor taki jak ten:

$(".gridHeader:first").removeAttr('style').css("width","100px"); 
+0

Twoja odpowiedź jest poprawna, ale efekt nie jest dokładnie chcę oglądać rzeczywistą szerokość 500px, jeśli mogę ustawić dla pierwszej kolumny. – Vikas

+1

@Vikas: Możesz ustawić dowolną szerokość za pomocą metody 'width', jak pokazano. – Sarfraz

+0

Zakończyłem to, zastępując szerokość wszystkich kolumn. dzięki .. – Vikas

0

Działa dobrze dla mnie? Chyba że nie rozumiem twojego "problemu".

Sprawdź: http://www.jsfiddle.net/YjC6y/21/

+0

To dlatego, że ustawiłem "" jako nową szerokość, jeśli ustawię "100px", to działa, co ciekawe? czemu? – Vikas

0

Jeśli chciałeś nadpisać inline CSS, można mieć szczęście robi to tak:

style="width:100px !important;" 
+0

Czy próbowałeś tego w moim kodzie? W firebugie wydaje się, że go przesłonimy, ale efekt nie jest dokładnie taki, jaki chcę, obserwuj faktyczną szerokość, jeśli ustawię 500px. – Vikas

2

Chyba twój problem nie jest to pierwsza kolumna, ale inni, podczas gdy nadal mają one 100% zastosowania.

$(".gridHeader").css("width",""); 

... nie działa, ponieważ nie ustawiono wartości prawnej.

Spróbuj tego:

$(".gridHeader").not(':first-child').css("width","auto"); 
+1

Stary post, ale uratowałeś moją skórę. – Adam

Powiązane problemy