* { padding:0; margin:0; } #div { width:300px; margin:100px auto; } table { border-collapse:collapse; border-spacing:0; border:2px solid #ccc; width:300px; } th,td { border:1px solid #ccc; color:#000; padding:10px; } th { background-color:#09c; font:bold 18px "幼圆"; color:#ffffff; } td { font:bold 16px "幼圆"; text-align:center; } tr { background-color:rgb(237,238,240); } tr:hover { cursor:pointer; background-color:#fff; } body { background-color:#ccc; }
点击表头(蓝色背景)的复选按钮,实现全选和全不选的切换