Menu
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>
983
The only way to override inline styles is by using !important . Many JavaScript frameworks and libraries add inline styles. Using !important with a very targeted selector, such as an attribute selector using the inline style, is one way to override these inline styles.
To override an attribute that a CSS class defines, simply append a new inline style after the DIV's class definition.
CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. Overriding: Overriding in CSS means that you are providing any style property to an element for which you have already provided a style.
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
