表の表現いろいろ（黄）

黄の見出し付きの表1

入学金 受講料 合計
21,000 70,770 91,770
CODE
HTML 

   <table class="tableY">
    <tbody>
     <tr>
      <th>入学金</th>
      <th>受講料</th>
      <th>合計</th>
     </tr>
     <tr>
      <td class="r">21,000</td>
      <td class="r">70,770</td>
     <td class="r">91,770</td>
    </tr>
    </tbody>
   </table>
CSS 

/* テーブル 黄 */
/* class="r"：右寄せ、class="l":左寄せ、class="c"：中央寄せ*/
table.tableG {
  margin-left:10px;
  margin-top: 0em;
  margin-bottom: 0em;
  width: 96%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}
table.tableG caption {
  margin-top: 0.3em;
  text-align: left;
  font-size:120%;
}
table.tableG th,
table.tableG td {
  padding: 4px 1px;
}
table.tableG th {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #20b2aa;
  color:#FFF;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
}
table.tableG td {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #eee;
  text-align: right;
/*  white-space: nowrap;*/
  font-size: 92%;
  word-break:break-all;
}
table.tableG td.c{text-align:center;}
table.tableG td.vc{text-align:center;color:#c71585;font-weight:bold;}
table.tableG td.l{text-align:left;}
料金の分割支払いの金額
分割回数 初回支払額 2回目以降 支払額合計 (分割手数料) (振込みの場合)
3 31,892 31,800 95,492 992 94,500
6 16,484 16,000 96,484 1,984 94,500
10 10,507 9,700 97,807 3,307 94,500
12 8,269 8,200 98,469 3,969 94,500
24 5,838 4,200 102,438 7,938 94,500
36 4,907 2,900 106,407 11,907 94,500
CODE
HTML 

   <table class="tableG">
    <caption>料金の分割支払いの金額</caption>
    <tbody>
     <tr>
      <th>分割回数</th>
      <th>初回支払額</th>
      <th>2回目以降</th>
      <th>支払額合計</th>
      <th>(分割手数料)</th>
      <th>(振込みの場合)</th>
     </tr>
     <tr>
      <td class="c">3</td>
      <td class="r">31,892</td>
      <td class="r">31,800</td>
      <td class="r">95,492</td>
      <td class="r">992</td>
      <td class="r">94,500</td>
     </tr>
     <tr>
      <td class="c">6</td>
      <td class="r">16,484</td>
      <td class="r">16,000</td>
      <td class="r">96,484</td>
      <td class="r">1,984</td>
      <td class="r">94,500</td>
     </tr>
     <tr>
      <td class="c">10</td>
      <td class="r">10,507</td>
      <td class="r">9,700</td>
      <td class="r">97,807</td>
      <td class="r">3,307</td>
      <td class="r">94,500</td>
     </tr>
     <tr>
      <td class="c">12</td>
      <td class="r">8,269</td>
      <td class="r">8,200</td>
      <td class="r">98,469</td>
      <td class="r">3,969</td>
      <td class="r">94,500</td>
     </tr>
     <tr>
      <td class="c">24</td>
      <td class="r">5,838</td>
      <td class="r">4,200</td>
      <td class="r">102,438</td>
      <td class="r">7,938</td>
      <td class="r">94,500</td>
     </tr>
     <tr>
      <td class="c">36</td>
      <td class="r">4,907</td>
      <td class="r">2,900</td>
      <td class="r">106,407</td>
      <td class="r">11,907</td>
      <td class="r">94,500</td>
     </tr>
    </tbody>
   </table>
Javascript 

//奇数行のtdの色を変えるためクラスを"odd"にする
$(function() {
    $('tr:nth-child(odd)').addClass('odd');
});
CSS 

//奇数行のtdの色をaliceblueに設定
table tr.odd td {
    background: aliceblue;
}
/* テーブル 黄 */
table.tableG {
  margin-left:10px;
  margin-top: 0em;
  margin-bottom: 0em;
  width: 96%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}
table.tableG caption {
  margin-top: 0.3em;
  text-align: left;
  font-size:120%;
}
table.tableG th,
table.tableG td {
  padding: 4px 1px;
}
table.tableG th {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #20b2aa;
  color:#FFF;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
}
table.tableG td {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #eee;
  text-align: right;
/*  white-space: nowrap;*/
  font-size: 92%;
  word-break:break-all;
}
table.tableG td.c{text-align:center;}
table.tableG td.vc{text-align:center;color:#c71585;font-weight:bold;}
table.tableG td.l{text-align:left;}

コーナーを丸くしたテーブル

メーカー 製品名 ワット数 金額 重量 燃料 騒音
ホンダ EU9iGB 900 104,800 19.5 カセットボンベ2本 79～84
ホンダ EG25i 2500 114,980 29.9 ガソリン
ヤマハ EF9HiS 900 87,991 12.7 ガソリン 防音型
ワキタ HPG1600i2 1600 93,500 21.5 ガソリン 86
工進 GV-9i 900 57,958 14 ガソリン 65～58

メーカー 製品名 ワット数 金額 重量 燃料 騒音
ホンダ EU9iGB 900 104,800 19.5 カセットボンベ2本 79～84
ホンダ EG25i 2500 114,980 29.9 ガソリン
ヤマハ EF9HiS 900 87,991 12.7 ガソリン 防音型
ワキタ HPG1600i2 1600 93,500 21.5 ガソリン 86
工進 GV-9i 900 57,958 14 ガソリン 65～58

モバイル対応の表

表のデザインを変えて小さいスクリーンに対処します。

表示画面の幅が800px以下になると表示方法が下記のように変化します。

3辺・重量 九州 四国 中国 関西 中部 関東
80cm・5kg 1,200円 1,100円 1,000円 900円 800円 700円
140cm・20kg 1,700円 1,600円 1,500円 1,400円 1,200円 1,100円
160cm・30kg 2,200円 2,100円 2,000円 1,900円 1,700円 1,500円
CODE
HTML 

   <table class="mobtableY">
     <thead>
       <tr>
       <th>3辺・重量</th>
       <th>九州</th>
       <th>四国</th>
       <th>中国</th>
       <th>関西</th>
       <th>中部</th>
       <th>関東</th>
       </tr>
     </thead>
     <tbody>
       <tr>
        <td data-label="3辺・重量">80cm・5kg</td>
        <td data-label="九州">1,200円</td>
        <td data-label="四国">1,100円</td>
        <td data-label="中国">1,000円</td>
        <td data-label="関西">900円</td>
        <td data-label="中部">800円</td>
        <td data-label="関東">700円</td>
       </tr>
       <tr>
        <td data-label="3辺・合計">140cm・20kg</td>
        <td data-label="九州">1,700円</td>
        <td data-label="四国">1,600円</td>
        <td data-label="中国">1,500円</td>
        <td data-label="関西">1,400円</td>
        <td data-label="中部">1,200円</td>
        <td data-label="関東">1,100円</td>
       </tr>
       <tr>
        <td data-label="3辺・重量">160cm・30kg</td>
        <td data-label="九州">2,200円</td>
        <td data-label="四国">2,100円</td>
        <td data-label="中国">2,000円</td>
        <td data-label="関西">1,900円</td>
        <td data-label="中部">1,700円</td>
        <td data-label="関東">1,500円</td>
       </tr>
     </tbody>
   </table>
CSS 

/* モバイル対応の表(黄) */
table.mobTableG{
 width:100%;
 border-collapse:collapse;
 border-spacing:0;
 border:1px solid #ccc;
 padding:0;
 margin:0;
}
table.mobTableG tr{
 border:2px solid #20b2aa;
 padding:5px;
}
table.mobTableG th, table.mobTableG td{
 padding:10px;
 text-align:center;
}
table.mobTableG th{
 font-size:14px;
 letter-spacing:1px;
 background-color:#20b2aa;
 font-weight:bold;
 color: white;
}
@media screen and (max-width: 800px) {
 table mobTableG{
  border:0;
 }
 table.mobTableG thead{
  display:none;
 }
 table.mobTableG tr{
  margin-bottom:10px;
  display:block;
  border-bottom:2px solid #20b2aa;
 }
 table.mobTableG td{
  display:block;
  text-align:right;
  font-size:13px;
  border-bottom:1px dotted #20b2aa;
 }
 table.mobTableG td:first-child{
  background-color:#20b2aa;
  font-weight:bold;
  color: white;
 }
 table.mobTableG td:last-child{
  border-bottom:0px;
 }
 table.mobTableG td:before {
  content:attr(data-label);
  float:left;
  font-weight: bold;
 }
}

モバイル対応の表2

分割支払いの詳細
分割回数 初回支払額 2回目以降 支払額合計 (分割手数料) (振込みの場合)
3 31,892 31,800 95,492 992 94,500
6 16,484 16,000 96,484 1,984 94,500
10 10,507 9,700 97,807 3,307 94,500
12 8,269 8,200 98,469 3,969 94,500
24 5,838 4,200 102,438 7,938 94,500
36 4,907 2,900 106,407 11,907 94,500
CODE
HTML 

   <table class="mobtableY2">
    <caption>分割支払いの詳細</caption>
    <thead>
     <tr>
      <th>分割回数</th>
      <th>初回支払額</th>
      <th>2回目以降</th>
      <th>支払額合計</th>
      <th>(分割手数料)</th>
      <th>(振込みの場合)</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td data-label="分割回数">3</td>
      <td class="r" data-label="初回支払額">31,892</td>
      <td class="r" data-label="2回目以降">31,800</td>
      <td class="r" data-label="支払額合計">95,492</td>
      <td class="r" data-label="(分割手数料)">992</td>
      <td class="r" data-label="(振込みの場合)">94,500</td>
     </tr>
     <tr>
      <td data-label="分割回数">6</td>
      <td class="r" data-label="初回支払額">16,484</td>
      <td class="r" data-label="2回目以降">16,000</td>
      <td class="r" data-label="支払額合計">96,484</td>
      <td class="r" data-label="(分割手数料)">1,984</td>
      <td class="r" data-label="(振込みの場合)">94,500</td>
     </tr>
     <tr>
      <td data-label="分割回数">10</td>
      <td class="r" data-label="初回支払額">10,507</td>
      <td class="r" data-label="2回目以降">9,700</td>
      <td class="r" data-label="支払額合計">97,807</td>
      <td class="r" data-label="(分割手数料)">3,307</td>
      <td class="r" data-label="(振込みの場合)">94,500</td>
     </tr>
     <tr>
      <td data-label="分割回数">12</td>
      <td class="r" data-label="初回支払額">8,269</td>
      <td class="r" data-label="2回目以降">8,200</td>
      <td class="r" data-label="支払額合計">98,469</td>
      <td class="r" data-label="(分割手数料)">3,969</td>
      <td class="r" data-label="(振込みの場合)">94,500</td>
     </tr>
     <tr>
      <td data-label="分割回数">24</td>
      <td class="r" data-label="初回支払額">5,838</td>
      <td class="r" data-label="2回目以降">4,200</td>
      <td class="r" data-label="支払額合計">102,438</td>
      <td class="r" data-label="(分割手数料)">7,938</td>
      <td class="r" data-label="(振込みの場合)">94,500</td>
     </tr>
     <tr>
      <td data-label="分割回数">36</td>
      <td class="r" data-label="初回支払額">4,907</td>
      <td class="r" data-label="2回目以降">2,900</td>
      <td class="r" data-label="支払額合計">106,407</td>
      <td class="r" data-label="(分割手数料)">11,907</td>
      <td class="r" data-label="(振込みの場合)">94,500</td>
     </tr>
    </tbody>
   </table>
CSS 

/* モバイル対応の表(黄) */
table.mobTableG2{
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width:96%;
  border-collapse:separate;
  border-spacing:2px;
  font-size: 100%;
}
table.mobTableG2 caption {
  margin-top: 0.3em;
  text-align: center;
  font-size:140%;
  color:green;
}
table.mobTableG2 tr{
 border:2px solid #20b2aa;
 padding:5px;
}
table.mobTableG2 th, table.mobTableG2 td{
 padding:10px;
 text-align:center;
 background-color:floralwhite;
 border-bottom: solid 1px #B2B2B2;
 border-right: solid 1px #B2B2B2;
}
table.mobTableG2 th.r, table.mobTableG2 td.r{
 text-align:right;
}
table.mobTableG2 th.l, table.mobTableG2 td.l{
 text-align:left;
}
table.mobTableG2 th{
 letter-spacing:1px;
 background-color:#20b2aa;
 font-weight:bold;
 color: white;
}
@media screen and (max-width: 800px) {
 table mobTableG2{
  border:0;
 }
 table.mobTableG2 thead{
  display:none;
 }
 table.mobTableG2 tr{
  margin-bottom:10px;
  display:block;
  border-bottom:2px solid #20b2aa;
 }
 table.mobTableG2 td{
  display:block;
  text-align:right;
  font-size:13px;
  border-bottom:1px dotted #20b2aa;
 }
 table.mobTableG2 td:first-child{
  background-color:#20b2aa;
  font-weight:bold;
  color: white;
 }
 table.mobTableG2 td:last-child{
  border-bottom:0px;
 }
 table.mobTableG2 td:before {
  content:attr(data-label);
  float:left;
  font-weight: bold;
 }
}

単語 品詞 意味 用例
responsive 形容詞 すぐ応答[反応]する，敏感な We must be responsive to the needs of society.
adaptive 形容詞 適応性の(ある) social facilitation is an adaptive condition
elastic 形容詞 弾力のある，伸縮自在の Rubber is very elastic.
liquid 形容詞 液体の，液状の; 流動体の. to dilute a liquid with another liquid
fixed 形容詞 固定した，据え付けの. a fixed idea
CODE
HTML 

   <table class="mobTableY3">
    <thead>
     <tr>
      <th>単語</th>
      <th>品詞</th>
      <th>意味</th>
      <th>用例</th>
     </tr>
    </thead>
    <tbody>
    <tr>
     <th class="l" data-label="単語" >responsive</th>
     <td class="l" data-label="品詞" >形容詞</td>
     <td class="l" data-label="意味" >すぐ応答[反応]する，敏感な</td>
     <td class="l" data-label="用例" >We must be responsive to the needs of society.</td>
    </tr>
    <tr>
     <th class="l" data-label="単語">adaptive</th>
     <td class="l" data-label="品詞">形容詞</td>
     <td class="l" data-label="意味">適応性の(ある)</td>
     <td class="l" data-label="用例">social facilitation is an adaptive condition</td>
    </tr>
    <tr>
     <th class="l" data-label="単語">elastic</th>
     <td class="l" data-label="品詞">形容詞</td>
     <td class="l" data-label="意味">弾力のある，伸縮自在の</td>
     <td class="l" data-label="用例">Rubber is very elastic.</td>
    </tr>
    <tr>
     <th class="l" data-label="単語">liquid</th>
     <td class="l" data-label="品詞">形容詞</td>
     <td class="l" data-label="意味">液体の，液状の; 流動体の.</td>
     <td class="l" data-label="用例">to dilute a liquid with another liquid</td>    </tr>
    <tr>
     <th class="l" data-label="単語">fixed</th>
     <td class="l" data-label="品詞">形容詞</td>
     <td class="l" data-label="意味">固定した，据え付けの.</td>
     <td class="l" data-label="用例">a fixed idea</td>
    </tr>
    </tbody>
   </table>
CSS 

/* モバイル対応の表3(黄) */
table.mobTableY3{
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width:96%;
  border-collapse:separate;
  border-spacing:2px;
  font-size: 100%;
}
table.mobTableY3 caption {
  margin-top: 0.3em;
  text-align: center;
  font-size:140%;
  color:darkorange;
}

table.mobTableY3 td,table.mobTableY3 th{
 padding:10px;
 text-align:center;
 background-color:floralwhite;
 border-bottom: solid 1px #B2B2B2;
 border-right: solid 1px #B2B2B2;
}
table.mobTableY3 th{
 font-weight: bold;
}
table.mobTableY3 thead th{
 background:orange;
 color:white
}
table.mobTableY3 th.r, table.mobTableY3 td.r{
 text-align:right;
}
table.mobTableY3 th.l, table.mobTableY3 td.l{
 text-align:left;
}
@media only screen and (max-width:800px){
 table.mobTableY3{
  display: block;
 }
  table.mobTableY3 thead{
   display: none;
  }
  table.mobTableY3 tbody{
   display: block;
  }
   table.mobTableY3 tbody tr{
    display: block;
    margin-bottom: 1.5em;
   }
   table.mobTableY3 tbody th,
   table.mobTableY3 tbody td{
    display: list-item;
    border: none;
   }
   table.mobTableY3 tbody th{
    margin-bottom: 5px;
    list-style-type: none;
    color: #fff;
    background: orange;
   }
   table.mobTableY3 tbody td{
    margin-left: 20px;
    padding: 0;
   }
   table.mobTableY3 tbody td:nth-of-type(1):before { content:"[" attr(data-label) "]"; }
   table.mobTableY3 tbody td:nth-of-type(2):before { content:"[" attr(data-label) "]"; }
   table.mobTableY3 tbody td:nth-of-type(3):before { content:"[" attr(data-label) "]"; }
}

罫線使って伝票を表示

セルの罫線の有無
class 罫線の位置 例
b0 なし b0
b1 左 b1
b2 右 b2
b3 左、右 b3
b4 上 b4
b5 左、上 b5
b6 上、右 b6
b7 左、右、上 b7
b8 下 b8
b9 左、下 b9
b10 下、右 b10
b11 左、下、右 b11
b12 上、下 b12
b13 右、上、下 b13
b14 上、下、右 b14
b15 全部 b15
CODE
HTML 

   <table class="hyou" style="width:300px;">
    <caption style="font-size:140%;color:blue;margin-bottom:10px;">セルの罫線の有無</caption>
    <tbody>
     <tr>
      <th class="c">class</th>
      <th class="c">罫線の位置</th>
      <th class="c">例</th>
     </tr>
     <tr>
      <th class="c">b0</th>
      <td class="c">なし</td>
      <td class="c">b0</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b1</th>
      <td class="c">左</td>
      <td class="c b1">b1</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b2</th>
      <td class="c">右</td>
      <td class="c b2">b2</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b3</th>
      <td class="c">左、右</td>
      <td class="c b3">b3</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b4</th>
      <td class="c">上</td>
      <td class="c b4">b4</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b5</th>
      <td class="c">左、上</td>
      <td class="c b5">b5</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b6</th>
      <td class="c">上、右</td>
      <td class="c b6">b6</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b7</th>
      <td class="c">左、右、上</td>
      <td class="c b7">b7</td>
     </tr>
     <tr>
      <th class="c">b8</th>
      <td class="c">下</td>
      <td class="c b8">b8</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b9</th>
      <td class="c">左、下</td>
      <td class="c b9">b9</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b10</th>
      <td class="c">下、右</td>
      <td class="c b10">b10</td>
     </tr>
     <tr>
      <th class="c">b11</th>
      <td class="c">左、下、右</td>
      <td class="c b11">b11</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b12</th>
      <td class="c">上、下</td>
      <td class="c b12">b12</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b13</th>
      <td class="c">右、上、下</td>
      <td class="c b13">b13</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b14</th>
      <td class="c">上、下、右</td>
      <td class="c b14">b14</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
     <tr>
      <th class="c">b15</th>
      <td class="c">全部</td>
      <td class="c b15">b15</td>
     </tr>
     <tr>
      <th class="c"></th>
      <td class="c"></td>
      <td class="c"></td>
     </tr>
    </tbody>
   </table>
CSS 

table.hyou {
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width: 96%;
/*  border-collapse: separate;*/
  border-collapse: collapse;
/*   border-spacing: 2px;*/
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  font-size: 80%;
  table-layout: fixed;
}
table.hyou caption {
  margin-top: 0em;
  text-align: center;
}
table.hyou th,
table.hyou td {
  padding: 1px 2px;
}
table.hyou th {
/*  border-bottom: solid 1px #B2B2B2;*/
/*  border-right: solid 1px #B2B2B2;*/
  height:25px;
  background: #eee;
  text-align: right;
  white-space: nowrap;
//  font-size: 92%;
}
table.hyou td {
/*  border-bottom: solid 1px #B2B2B2;*/
  height:25px;
  padding:0px 5px;
  background: #fff;
  text-align: right;
  white-space: nowrap;
}
table.hyou td.No{width:40px;}
table.hyou td.c{text-align:center;}
table.hyou td.l{text-align:left;}
table.hyou td.b1{border-left:solid 1px #333;}
table.hyou td.b2{border-right: solid 1px #333;}
table.hyou td.b3{border-left:solid 1px #333;border-right: solid 1px #333;}
table.hyou td.b4{border-top: solid 1px #333;}
table.hyou td.b5{border-left:solid 1px #333;border-top: solid 1px #333;}
table.hyou td.b6{border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou td.b7{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou td.b8{border-bottom: solid 1px #333;}
table.hyou td.b9{border-left:solid 1px #333;border-bottom: solid 1px #333;}

table.hyou td.b10{border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b11{border-left:solid 1px #333;border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b12{border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b13{border-left:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b14{border-right:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b15{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}

table.hyou th.c{text-align:center;}
table.hyou th.l{text-align:left;}
table.hyou th.b1{border-left:solid 1px #333;}
table.hyou th.b2{border-right: solid 1px #333;}
table.hyou th.b3{border-left:solid 1px #333;border-right: solid 1px #333;}
table.hyou th.b4{border-top: solid 1px #333;}
table.hyou th.b5{border-left:solid 1px #333;border-top: solid 1px #333;}
table.hyou th.b6{border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou th.b7{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou th.b8{border-bottom: solid 1px #333;}
table.hyou th.b9{border-left:solid 1px #333;border-bottom: solid 1px #333;}

table.hyou th.b10{border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou th.b11{border-left:solid 1px #333;border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou th.b12{border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou th.b13{border-left:solid 1px #333;border-top: solid 1px #333;border-bottom: solid 1px #333;}
table.hyou th.b14{border-right:solid 1px #333;border-top: solid 1px #333;border-bottom: solid 1px #333;}
table.hyou th.b15{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}

　 　　　　　　　 　　請　　求　　書　 　　　　　 請求日 xxxx年xx月xx日
　　 　　 　　 　　 請求No
株式会社××××× 様 　　 　　 株式会社〇〇〇〇〇〇
　　 　　 　　 　　 〒000-0000
下記の通りご請求申し上げます。 　　 東京都〇〇区〇〇〇１－１－１
　　請　求　金　額 \3,115,254 　　 TEL 03-0000-0000
FAX 03-0000-0000
　　 　　　　　　品　　　　名　　　　　　 　数　量　 　単　価　 　　金　額　　
1 〇〇〇〇 (基本料A) 169.50 2,813 476,803
(残業25%加算) 23.50 703 16,520
(早朝・深夜50%加算) 46.00 1,407 64,722
○○手当 4 3,125 12,500
××手当 7 5,000 35,000
特別手当 1.00 2,000 2,000
小計 607,545
2 〇〇〇〇 (基本料A) 184.00 2,813 517,592
(残業25%加算) 34.00 703 23,902
(早朝・深夜50%加算) 60.50 1,407 85,123
○○手当 7 3,125 21,875
小計 648,492
3 〇〇〇〇 (基本料B) 166.00 2,757 457,662
(残業25%加算) 14.00 689 9,646
(早朝・深夜50%加算) 76.00 1,379 104,804
小計 572,112
4 〇〇〇〇 (基本料B) 174.25 2,757 480,407
(残業25%加算) 23.75 689 16,363
(早朝・深夜50%加算) 12.50 1,379 17,237
小計 514,007
5 〇〇〇〇 (基本料A) 153.50 2,813 431,795
(残業25%加算) 26.50 703 18,629
(早朝・深夜50%加算) 52.00 1,407 73,164
○○手当 6 3,125 18,750
小計 542,338
振込先：〇〇〇〇銀行　〇〇〇〇支店 合計 2,884,494
　普通預金　 〇〇〇〇　株式会社〇〇〇〇 消費税(8%) 230,760
　　※　振込手数料はご負担いただきますようお願い申し上げます。 請求額 \3,115,254
CODE
HTML 

<div id="seikyuuData">
 <table id="tableSeikyuu" class="hyou" style="table-layout:fixed;">
  <tbody class="seikyuusho">
   <tr>
    <td scope="col" style="width:20px" class="No">　</td>
    <td scope="col" style="width:100px">　　　　　　　</td>
    <td scope="col" style="width:140px;font-size:150%">　　請　　求　　書　</td>
    <td scope="col" style="width:60px">　　　　　</td>
    <td scope="col" class="l" style="width:60px">請求日 </td>
    <td scope="col" style="width:60px" class="l">xxxx年xx月xx日</td>
   </tr>
  <tr>
  <td>　　</td>
  <td>　　</td>
  <td>　　</td>
  <td>　　</td>
  <td class="l">請求No</td>
  <td id="seikyuushoNo" class="l"> </td>
  </tr>
  <tr>
  <td class="l" colspan="2" id="seikyuuSaki" style="font-size:140%">株式会社××××× 様</td>
  <td>　　</td>
  <td>　　</td>
  <td class="l" style="font-size:116%">株式会社〇〇〇〇〇〇</td>
  <td>  </td>
  </tr>
  <tr>
  <td>　　</td>
  <td>　　</td>
  <td>　　</td>
  <td>　　</td>
  <td class="l">〒000-0000</td>
  <td>  </td>
  </tr>
  <tr>
  <td class="l" colspan="3">下記の通りご請求申し上げます。</td>
  <td>　　</td>
  <td class="l" colspan="2">東京都〇〇区〇〇〇１－１－１ </td>
  </tr>
  <tr>
  <td colspan="2" rowspan="2" class="l b13" style="font-size:120%">　　請　求　金　額</td>
  <td rowspan="2" id="seikyuuGaku" class="b14" style="font-size:120%;padding-right:20px">\3,115,254</td>
  <td>　　</td>
  <td colspan="2" class="l">TEL  03-0000-0000</td>
  </tr>
  <tr>
  <td class="b1">  </td>
  <td colspan="2" class="l">FAX  03-0000-0000</td>
  </tr>
  <tr>
  <td style="height:8px;">  </td>
  <td style="height:8px;">  </td>
  <td style="height:8px;">  </td>
  <td style="height:8px;">  </td>
  <td style="height:8px;">  </td>
  <td style="height:8px;">  </td>
  </tr>
  <tr>
  <td class="b13">　　</td>
  <td class="c b14" colspan="2">　　　　　　品　　　　名　　　　　　</td>
  <td class="c b14">　数　量　</td>
  <td class="c b14">　単　価　</td>
  <td class="c b14">　　金　額　　</td>
  </tr>
  <tr>
   <td class="No b13">1</td>
   <td class="l b13">〇〇〇〇</td>
   <td class="l b12">(基本料A)</td>
   <td class="b13">169.50</td>
   <td class="b13">2,813</td>
   <td class="b15">476,803</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(残業25%加算)</td>
   <td class="b13">23.50</td>
   <td class="b13">703</td>
   <td class="b15">16,520</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(早朝・深夜50%加算)</td>
   <td class="b13">46.00</td>
   <td class="b13">1,407</td>
   <td class="b15">64,722</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">○○手当</td>
   <td class="b13">4</td>
   <td class="b13">3,125</td>
   <td class="b15">12,500</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">××手当</td>
   <td class="b13">7</td>
   <td class="b13">5,000</td>
   <td class="b15">35,000</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">特別手当</td>
   <td class="b13">1.00</td>
   <td class="b13">2,000</td>
   <td class="b15">2,000</td>
  </tr>
  <tr>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b12">小計</th>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b15">607,545 </th>
  </tr>
  <tr>
   <td class="No b13">2</td>
   <td class="l b13">〇〇〇〇</td>
   <td class="l b12">(基本料A)</td>
   <td class="b13">184.00</td>
   <td class="b13">2,813</td>
   <td class="b15">517,592</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(残業25%加算)</td>
   <td class="b13">34.00</td>
   <td class="b13">703</td>
   <td class="b15">23,902</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(早朝・深夜50%加算)</td>
   <td class="b13">60.50</td>
   <td class="b13">1,407</td>
   <td class="b15">85,123</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">○○手当</td>
   <td class="b13">7</td>
   <td class="b13">3,125</td>
   <td class="b15">21,875</td>
  </tr>
  <tr>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b12">小計</th>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b15">648,492 </th>
  </tr>
  <tr>
   <td class="No b13">3</td>
   <td class="l b13">〇〇〇〇</td>
   <td class="l b12">(基本料B)</td>
   <td class="b13">166.00</td>
   <td class="b13">2,757</td>
   <td class="b15">457,662</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(残業25%加算)</td>
   <td class="b13">14.00</td>
   <td class="b13">689</td>
   <td class="b15">9,646</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(早朝・深夜50%加算)</td>
   <td class="b13">76.00</td>
   <td class="b13">1,379</td>
   <td class="b15">104,804</td>
  </tr>
  <tr>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b12">小計</th>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b15">572,112 </th>
  </tr>
  <tr>
   <td class="No b13">4</td>
   <td class="l b13">〇〇〇〇</td>
   <td class="l b12">(基本料B)</td>
   <td class="b13">174.25</td>
   <td class="b13">2,757</td>
   <td class="b15">480,407</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(残業25%加算)</td>
   <td class="b13">23.75</td>
   <td class="b13">689</td>
   <td class="b15">16,363</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(早朝・深夜50%加算)</td>
   <td class="b13">12.50</td>
   <td class="b13">1,379</td>
   <td class="b15">17,237</td>
  </tr>
  <tr>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b12">小計</th>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b15">514,007 </th>
  </tr>
  <tr>
   <td class="No b13">5</td>
   <td class="l b13">〇〇〇〇</td>
   <td class="l b12">(基本料A)</td>
   <td class="b13">153.50</td>
   <td class="b13">2,813</td>
   <td class="b15">431,795</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(残業25%加算)</td>
   <td class="b13">26.50</td>
   <td class="b13">703</td>
   <td class="b15">18,629</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">(早朝・深夜50%加算)</td>
   <td class="b13">52.00</td>
   <td class="b13">1,407</td>
   <td class="b15">73,164</td>
  </tr>
  <tr>
   <td class="l b13"> </td>
   <td class="b13"> </td>
   <td class="l b12">○○手当</td>
   <td class="b13">6</td>
   <td class="b13">3,125</td>
   <td class="b15">18,750</td>
  </tr>
  <tr>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b12">小計</th>
   <th class="b13"> </th>
   <th class="b13"> </th>
   <th class="b15">542,338 </th>
  </tr>
  <tr>
   <td class="b13"> </td>
   <td class="l b13"> </td>
   <td class="l b12"> </td>
   <td class="b13"> </td>
   <td class="b13"> </td>
   <td class="b15"> </td>
  </tr>
  <tr>
   <td class="b13"> </td>
   <td class="l b13"> </td>
   <td class="l b12"> </td>
   <td class="b13"> </td>
   <td class="b13"> </td>
   <td class="b15"> </td>
  </tr>
  <tr>
   <td class="b13"> </td>
   <td class="l b13"> </td>
   <td class="l b12"> </td>
   <td class="b13"> </td>
   <td class="b13"> </td>
   <td class="b15"> </td>
  </tr>
  <tr>
   <td class="l" colspan="3"> 振込先：〇〇〇〇銀行　〇〇〇〇支店</td>
   <td colspan="2" class="c b13">合計</td>
   <td class="b15">2,884,494</td>
  </tr>
  <tr>
   <td class="l" colspan="3">　普通預金　 〇〇〇〇　株式会社〇〇〇〇</td>
   <td colspan="2" class="c b13">消費税(8%)</td>
   <td class="b15">230,760</td>
  </tr>
  <tr>
   <td class="l" colspan="3" style="font-size:86%">　　※　振込手数料はご負担いただきますようお願い申し上げます。 </td>
   <td colspan="2" class="c b13">請求額</td>
   <td class="b15">\3,115,254</td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  </tbody>
 </table>
</div>
CSS 

/* 請求書テーブル 　*/
table.hyou {
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width: 96%;
/*  border-collapse: separate;*/
  border-collapse: collapse;
/*   border-spacing: 2px;*/
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  font-size: 80%;
  table-layout: fixed;
}
table.hyou caption {
  margin-top: 0em;
  text-align: center;
}
table.hyou th,
table.hyou td {
  padding: 1px 2px;
}
table.hyou th {
/*  border-bottom: solid 1px #B2B2B2;*/
/*  border-right: solid 1px #B2B2B2;*/
  height:25px;
  background: #eee;
  text-align: right;
  white-space: nowrap;
//  font-size: 92%;
}
table.hyou td {
/*  border-bottom: solid 1px #B2B2B2;*/
  height:25px;
  padding:0px 5px;
  background: #fff;
  text-align: right;
  white-space: nowrap;
}
table.hyou td.No{width:40px;}
table.hyou td.c{text-align:center;}
table.hyou td.l{text-align:left;}
table.hyou td.b1{border-left:solid 1px #333;}
table.hyou td.b2{border-right: solid 1px #333;}
table.hyou td.b3{border-left:solid 1px #333;border-right: solid 1px #333;}
table.hyou td.b4{border-top: solid 1px #333;}
table.hyou td.b5{border-left:solid 1px #333;border-top: solid 1px #333;}
table.hyou td.b6{border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou td.b7{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou td.b8{border-bottom: solid 1px #333;}
table.hyou td.b9{border-left:solid 1px #333;border-bottom: solid 1px #333;}

table.hyou td.b10{border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b11{border-left:solid 1px #333;border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b12{border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b13{border-left:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b14{border-right:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou td.b15{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}

table.hyou th.c{text-align:center;}
table.hyou th.l{text-align:left;}
table.hyou th.b1{border-left:solid 1px #333;}
table.hyou th.b2{border-right: solid 1px #333;}
table.hyou th.b3{border-left:solid 1px #333;border-right: solid 1px #333;}
table.hyou th.b4{border-top: solid 1px #333;}
table.hyou th.b5{border-left:solid 1px #333;border-top: solid 1px #333;}
table.hyou th.b6{border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou th.b7{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;}
table.hyou th.b8{border-bottom: solid 1px #333;}
table.hyou th.b9{border-left:solid 1px #333;border-bottom: solid 1px #333;}

table.hyou th.b10{border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou th.b11{border-left:solid 1px #333;border-right: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou th.b12{border-top: solid 1px #333;;border-bottom: solid 1px #333;}
table.hyou th.b13{border-left:solid 1px #333;border-top: solid 1px #333;border-bottom: solid 1px #333;}
table.hyou th.b14{border-right:solid 1px #333;border-top: solid 1px #333;border-bottom: solid 1px #333;}
table.hyou th.b15{border-left:solid 1px #333;border-right:solid 1px #333;border-top: solid 1px #333;;border-bottom: solid 1px #333;}