cssの無効化について

Question

このtableのcssを無効化にするにはどうしたらいいのでしょうか？

table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}

ちなみに、上記のcssはいじることができない大元のものなので打ち消す方法を教えてください。

Answer 1

より詳細度を上げる（セレクタを追加する）、もしくは上のCSSより後からかける形で、

table.detailed-selector{
  border-collapse: separate;
  /* 規格上はデフォルト値が0だけど、現実にはこの値らしい */
  border-spacing: 1px;
}

のようにすれば、デフォルト値と同等の値になります。

なお、font-sizeのデフォルト値はmediumですが、この値は100%と同じ意味なので、わざわざ設定するまでもなくデフォルトと同じ挙動です。

Answer 2

maisumakunさんの方法をお薦めしますが、全体もしくは当該HTML中に影響するCSSの追加が困難な場合は、jQueryで要素単位に操作もできます。(jQuery出なくてもできますが・・・)

<table id="tableid" class="table">の想定 ```jQuery $('#tableid').removeAttr('style'); or $("#tableid").toggleClass("table"); or $("#tableid").removeClass("table"); ``` ↑ id="tableid"の要素の全てのスタイルが無くなります。

$('#tableid').css('border-collapse',''); 
$('#tableid').css('border-spacing',''); 
$('#tableid').css('font-size','');