如何覆盖css属性？

Question

I have tried to use jquery, but could not override the width property of the .gridHeader class. 我试图使用jquery，但无法覆盖.gridHeader类的width属性。

I'd like to fix (let's say 100px) the width of the first column in the table. 我想修复（比如说100px）表格中第一列的宽度。

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

Answer 1

You need to remove the inline style with removeAttr and then use the css() method like this: 您需要使用removeAttr删除内联样式，然后使用css()方法，如下所示：

$(".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: 如果要仅将宽度应用于第一列，可以使用:first filter选择器，如下所示：

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

Answer 2

I guess your problem is not the first column, but the others, while they still have 100% applied. 我猜你的问题不是第一列，而是其他人，虽然他们仍然100％应用。

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

...won't work, because you did not set a legal value. ......不会起作用，因为你没有设定合法的价值。

Try this: 尝试这个：

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

Answer 3

Works fine for me? 适合我吗？ Unless I don't understand your "problem". 除非我不明白你的“问题”。

Check: http://www.jsfiddle.net/YjC6y/21/ 检查： http ： //www.jsfiddle.net/YjC6y/21/

Answer 4

如果你想覆盖CSS内联，你可能会这样运气：

style="width:100px !important;"

如何覆盖css属性？

问题描述

4 个解决方案

解决方案1
12 已采纳 2010-10-14 05:25:49

解决方案2
2 2010-10-14 05:47:19

解决方案3
0 2010-10-14 05:29:46

解决方案4
0 2010-10-14 05:33:39

如何覆盖css属性？

问题描述

4 个解决方案

解决方案1 12 已采纳 2010-10-14 05:25:49

解决方案2 2 2010-10-14 05:47:19

解决方案3 0 2010-10-14 05:29:46

解决方案4 0 2010-10-14 05:33:39

解决方案1
12 已采纳 2010-10-14 05:25:49

解决方案2
2 2010-10-14 05:47:19

解决方案3
0 2010-10-14 05:29:46

解决方案4
0 2010-10-14 05:33:39