テーブル内のテーブルの罫線
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>テーブル内のテーブルの罫線</title>
- <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- // テーブル内のテーブルのクラスを指定
- inTbl = $('.inTbl');
- // テーブル内のテーブルの親のtdのpaddingを0にする
- $(inTbl).parent("td").css("padding", "0");
- // テーブル内のテーブル内のtdとthの左側の線を消す
- $(inTbl).find("th").css("border-left", "none");
- $(inTbl).find("td").css("border-left", "none");
- // テーブル内のテーブル内のtr内の最後の要素の右側の線を消す
- $(inTbl).find("tr :last-child").css("border-right", "none");
- // テーブル内のテーブル内の最初のtr内のthとtdの上側の線を消す
- $(inTbl).find("tr:first-child th").css("border-top", "none");
- $(inTbl).find("tr:first-child td").css("border-top", "none");
- // テーブル内のテーブル内の最後のtr内のthとtdの下側の線を消す
- $(inTbl).find("tr:last-child th").css("border-bottom", "none");
- $(inTbl).find("tr:last-child td").css("border-bottom", "none");
- });
- </script>
- <style>
- table
- {
- border-collapse:collapse;
- width:100%;
- }
- th, td
- {
- text-align:left;
- vertical-align:top;
- padding:3px;
- font-weight:normal;
- border:1px solid #ccc;
- background:#fff;
- font-size:12px;
- }
- th{background:#eee;}
- </style>
- </head>
- <body>
- <h1>テーブル内のテーブルの罫線</h1>
- <h2>テーブル内のテーブルの罫線の左右上下を消す</h2>
- <table>
- <tr><th>品名</th><td>丸ごとシマウマ</td></tr>
- <tr><th>基本情報</th><td>
- <table class="inTbl">
- <tr><th>提供価格</th><th>提供本数</th></tr>
- <tr><td>1本290円</td><td>2本ずつ</td></tr>
- </table>
- </td></tr>
- <tr><th>売上</th><td>
- <table class="inTbl">
- <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
- <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
- </table>
- </td></tr>
- </table>
- <h2>テーブル内のテーブル:何もしない場合</h2>
- <table>
- <tr><th>品名</th><td>丸ごとシマウマ</td></tr>
- <tr><th>基本情報</th><td>
- <table>
- <tr><th>提供価格</th><th>提供本数</th></tr>
- <tr><td>1本290円</td><td>2本ずつ</td></tr>
- </table>
- </td></tr>
- <tr><th>売上</th><td>
- <table>
- <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
- <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
- </table>
- </td></tr>
- </table>
- <h2>テーブル内のテーブル:余白だけ調整</h2>
- <table>
- <tr><th>品名</th><td>丸ごとシマウマ</td></tr>
- <tr><th>基本情報</th><td style="padding:0;">
- <table>
- <tr><th>提供価格</th><th>提供本数</th></tr>
- <tr><td>1本290円</td><td>2本ずつ</td></tr>
- </table>
- </td></tr>
- <tr><th>売上</th><td style="padding:0;">
- <table>
- <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
- <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
- </table>
- </td></tr>
- </table>
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>