使用按钮/jquery改变表格的CSS样式

问题是:

我想能够打开和关闭这个html表上的网格。我不知道为什么css不接管除了原来的css我的表是不允许改变。

小提琴来了

css:

td{ width:15px; height:15px;  font-size: 10px; text-align:center;  vertical-align:middle;  border-style:inset;   text-overflow:ellipsis;    white-space: nowrap; z-index:-1;}

，这里是jquery:

$('#hideGrid').click(function(){
    $('#tab td').css({ 'border-style': 'none !important'});
});
$('#showGrid').click(function(){
    $('#tab.td').css({'border-style': 'inset !important'});
});

关于如何获得css与按钮覆盖声明的原始css或解释为什么这个方法不工作的建议?

谢谢!

 <table id="tab">

td.no-border {
    border-style:none;
}

$('#hideGrid').click(function () {
    $('#tab td').addClass('no-border'); //Added class
});
$('#showGrid').click(function () {
    $('#tab td').removeClass('no-border'); //Removed class
});

$(document).ready(function(){
    var tableTds = $('table td');
    $('#hideGrid').click(function(){
        tableTds.css('border-style', 'none');
    });
    $('#showGrid').click(function(){
        tableTds.css('border-style', 'inset');
    });          
});