<html> <head> <style> th, td { background: #ddd; } table { border-collapse: collapse; } </style> </head> <body> <table border="1"> <tr><th>x</th><th colspan="2" class="a1 a2">A</th></tr> <tr><th>x</th><td class="a1">a1</td><td class="a2">a2</td></tr> </table> <script type="text/javascript"> function addCSSRule(selector, rule) { var css = document.styleSheets[ document.styleSheets.length -1]; css.insertRule(selector+" {"+rule+"}", css.cssRules.length); } function removeCSSRule(selector, rule) { rule = rule.split(':'); for (cssno=0; cssno<document.styleSheets.length;cssno++) { var css = document.styleSheets[cssno]; for (i=(css.cssRules.length-1);i>=0;i--) { var rule = css.cssRules[i]; if (rule.selectorText == selector && rule.style[ rule[0] ] == rule[1]) css.deleteRule(i); } } } function setClassDisplay(display, classname) { document.body.offsetWidth if (display) removeCSSRule("."+classname, "display:none"); else addCSSRule("."+classname, "display:none"); } setClassDisplay(false, 'a1'); setClassDisplay(false, 'a2'); setClassDisplay(true, 'a1'); setClassDisplay(true, 'a2'); </script> </body> </html>