카테고리 없음 css table 테이블 interdigm 2017. 11. 15. 03:16 css table 테이블 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <style> #table {border-top:2px solid #666; border-bottom:1px solid #ccc; margin:0 auto; } /* table 테두리, cellspacing이 필요하면 border-spacing: 8px;border-collapse: separate; */ #table td {border-top:1px solid #ebebeb; border-left:1px solid #ebebeb; padding:5px} /* 전체 td 적용, cellpadding 은 padding으로 처리 */ #table td:first-child {border-left:0} /* 첫번째 td 왼쪽 테두리 없애기 */ #table tr:first-child {background:#f7f7f7 !important} /* 첫번째 tr 백그라운드 - th역활 !important 는 다른css보다 우선적용명령*/ #table tr:first-child td {border-top:0; border-left-color:#ccc} /* 첫번째 tr 의 td 사이 색상변경 */ #table tr:nth-child(2) td {border-top-color:#ccc;} /* 첫번째 tr의 bottom 테두리를 위하여, 2번째 tr의 td 상단테두리 색상변경 */ #table tr:last-child {background:#f7f7f7 !important} /* 마지막 tr 백그라운드 - 합계등이 필요할때 */ #table tr:last-child td {border-top-color:#ccc; border-left-color:#ccc} /* 마지막 tr의 td 사이 색상변경 */ /* tr 짝수 홀수 */ #table tr:nth-child(odd) {background:#fffff4;} #table tr:nth-child(even) {background:#fefdfd;} /* tr 마우스오버 */ #table tr:hover {background:#f3f9fe} /* tr 클릭시 배경변경 */ #table tr.selected {background:red} </style> <!-- tr클릭시 배경변경 스크립트 --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ // 여러개 tr을 선택할때 // $("#table tr").click(function(){ // $(this).toggleClass("selected"); // }); // 한개만의 tr을 선택할때 $("#table tr").click(function() { var selected = $(this).hasClass("selected"); $("#table tr").removeClass("selected"); if(!selected) $(this).addClass("selected"); }); }); </script> <!-- tr클릭시 배경변경 스크립트 끝 --> </head> <body> <table id="table" width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>