How to override css property?

Question

I have tried to use jquery, but could not override the width property of the .gridHeader class.

I'd like to fix (let's say 100px) the width of the first column in the table.

<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>

Sarfraz · Accepted Answer · 2010-10-14 05:25:49Z

13

You need to remove the inline style with removeAttr and then use the css() method like this:

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

If you want to apply the width to first column only, you can use the :first filter selector like this:

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

answered Oct 14, 2010 at 5:25

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vikas Over a year ago

Your answer is correct, but effect is not exactly I want, watch the actual width if I set 500px for first column.

Sarfraz Over a year ago

@Vikas: You can set whatever width using width method as shown.

Dr.Molle · Accepted Answer · 2010-10-14 05:47:19Z

2

I guess your problem is not the first column, but the others, while they still have 100% applied.

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

...won't work, because you did not set a legal value.

Try this:

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

answered Oct 14, 2010 at 5:47

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

1 Comment

Adam Over a year ago

Old post, but you've saved my skin.

jAndy · Accepted Answer · 2010-10-14 05:29:46Z

0

Works fine for me? Unless I don't understand your "problem".

Check: http://www.jsfiddle.net/YjC6y/21/

answered Oct 14, 2010 at 5:29

jAndy

237k57 gold badges313 silver badges363 bronze badges

1 Comment

Vikas Over a year ago

It is because I set "" as new width, if I set it "100px" then it works, interesting? why?

elp · Accepted Answer · 2014-03-19 13:58:07Z

0

If you wanted to override the CSS inline, you may have luck doing it like this:

style="width:100px !important;"

edited Mar 19, 2014 at 13:58

elp

8,1037 gold badges65 silver badges124 bronze badges

answered Oct 14, 2010 at 5:33

Shawn

91 bronze badge

1 Comment

Vikas Over a year ago

Have you tried it in my code? In firebug, it seems that we override it, but effect is not exactly I want, watch the actual width if I set 500px.

Collectives™ on Stack Overflow

How to override css property?

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related