How to override css property?

jquery html css properties

51,370

Solution 1

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");

Solution 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");

51,370

Author by

Vikas

<3 to code..

Updated on April 23, 2020

Comments

Vikas about 4 years

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>

Vikas over 13 years

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

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.
Vikas over 13 years

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

@Vikas: You can set whatever width using width method as shown.
Adam about 10 years

Old post, but you've saved my skin.