开发者

How to override css property?

开发者 https://www.devze.com 2023-01-19 19:02 出处:网络
I have tried to us开发者_如何学编程e jquery, but could not override the width property of the .gridHeader class.

I have tried to us开发者_如何学编程e 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>


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


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


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

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


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

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

精彩评论

暂无评论...
验证码 换一张
取 消