テーブル内のテーブルの罫線

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>テーブル内のテーブルの罫線</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9.   // テーブル内のテーブルのクラスを指定
  10.   inTbl = $('.inTbl');
  11.   // テーブル内のテーブルの親のtdのpaddingを0にする
  12.   $(inTbl).parent("td").css("padding", "0");
  13.   // テーブル内のテーブル内のtdとthの左側の線を消す
  14.   $(inTbl).find("th").css("border-left", "none");
  15.   $(inTbl).find("td").css("border-left", "none");
  16.   // テーブル内のテーブル内のtr内の最後の要素の右側の線を消す
  17.   $(inTbl).find("tr :last-child").css("border-right", "none");
  18.   // テーブル内のテーブル内の最初のtr内のthとtdの上側の線を消す
  19.   $(inTbl).find("tr:first-child th").css("border-top", "none");
  20.   $(inTbl).find("tr:first-child td").css("border-top", "none");
  21.   // テーブル内のテーブル内の最後のtr内のthとtdの下側の線を消す
  22.   $(inTbl).find("tr:last-child th").css("border-bottom", "none");
  23.   $(inTbl).find("tr:last-child td").css("border-bottom", "none");
  24. });
  25. </script>
  26. <style>
  27.   table
  28.   {
  29.     border-collapse:collapse;
  30.     width:100%;
  31.   }
  32.   th, td
  33.   {
  34.     text-align:left;
  35.     vertical-align:top;
  36.     padding:3px;
  37.     font-weight:normal;
  38.     border:1px solid #ccc;
  39.     background:#fff;
  40.     font-size:12px;
  41.   }
  42.   th{background:#eee;}
  43. </style>
  44. </head>
  45. <body>
  46. <h1>テーブル内のテーブルの罫線</h1>
  47. <h2>テーブル内のテーブルの罫線の左右上下を消す</h2>
  48. <table>
  49. <tr><th>品名</th><td>丸ごとシマウマ</td></tr>
  50. <tr><th>基本情報</th><td>
  51.   <table class="inTbl">
  52.   <tr><th>提供価格</th><th>提供本数</th></tr>
  53.   <tr><td>1本290円</td><td>2本ずつ</td></tr>
  54.   </table>
  55. </td></tr>
  56. <tr><th>売上</th><td>
  57.   <table class="inTbl">
  58.   <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
  59.   <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
  60.   </table>
  61. </td></tr>
  62. </table>
  63. <h2>テーブル内のテーブル:何もしない場合</h2>
  64. <table>
  65. <tr><th>品名</th><td>丸ごとシマウマ</td></tr>
  66. <tr><th>基本情報</th><td>
  67.   <table>
  68.   <tr><th>提供価格</th><th>提供本数</th></tr>
  69.   <tr><td>1本290円</td><td>2本ずつ</td></tr>
  70.   </table>
  71. </td></tr>
  72. <tr><th>売上</th><td>
  73.   <table>
  74.   <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
  75.   <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
  76.   </table>
  77. </td></tr>
  78. </table>
  79. <h2>テーブル内のテーブル:余白だけ調整</h2>
  80. <table>
  81. <tr><th>品名</th><td>丸ごとシマウマ</td></tr>
  82. <tr><th>基本情報</th><td style="padding:0;">
  83.   <table>
  84.   <tr><th>提供価格</th><th>提供本数</th></tr>
  85.   <tr><td>1本290円</td><td>2本ずつ</td></tr>
  86.   </table>
  87. </td></tr>
  88. <tr><th>売上</th><td style="padding:0;">
  89.   <table>
  90.   <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
  91.   <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
  92.   </table>
  93. </td></tr>
  94. </table>
  95. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  96. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  97. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  98. </div>
  99. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  100. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  101. </div>
  102. </body>
  103. </html>