我试图使用
jquery,但无法覆盖.gridHeader类的width属性.
我想修复(比如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>
解决方法
您需要使用
removeAttr删除内联样式,然后使用css()方法,如下所示：
$(".gridHeader").removeAttr('style').css("width","100px");
如果只想将宽度应用于第一列,可以使用:first过滤器选择器,如下所示：
$(".gridHeader:first").removeAttr('style').css("width","100px");
