How to override css property?
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;"
加载中,请稍侯......
精彩评论