表の表現いろいろ（青）

青の見出し付きの表

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

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

/* テーブル 青 */
/* デフォルトとclass="r"：右寄せ、class="l":左寄せ、class="c"：中央寄せ*/
table.tableB {
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width: 96%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}
table.tableB caption {
  margin-top: 0.3em;
  text-align: center;
}
table.tableB th,
table.tableB td {
  padding: 4px 6px;
}
table.tableB th {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #3366cc;
  color:#FFF;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
}
table.tableB td {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: floralwhite;
  text-align: right;
  /*white-space: nowrap;*/
}
table.tableB td.c{text-align:center;}
table.tableB td.l{text-align:left;}
table.tableB td.r{text-align:right;}
料金の分割支払いの金額
分割回数 初回支払額 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="tableB">
    <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>
CSS 

/* テーブル 青 */
table.tableB {
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width: 96%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}
table.tableB caption {
  margin-top: 0.3em;
  text-align: center;
}
table.tableB th,
table.tableB td {
  padding: 4px 6px;
}
table.tableB th {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #3366cc;
  color:#FFF;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
}
table.tableB td {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: floralwhite;
  text-align: right;
  /*white-space: nowrap;*/
}
table.tableB td.c{text-align:center;}
table.tableB td.l{text-align:left;}
table.tableB td.r{text-align:right;}

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

メーカー 製品名 ワット数 金額 重量 燃料 騒音
ホンダ 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
CODE
HTML 

  <table class="tableBR">
     <tr>
      <th width="15%">メーカー</th>
      <th width="15%">製品名</th>
      <th width="10%">ワット数</th>
      <th width="15%">金額</th>
      <th width="10%">重量</th>
      <th width="20%">燃料</th>
      <th width="15%">騒音</th>
     </tr>
     <tr>
      <td>ホンダ</td>
      <td>EU9iGB</td>
      <td>900</td>
      <td>104,800</td>
      <td>19.5</td>
      <td>カセットボンベ2本</td>
      <td>79～84</td>
     </tr>
     <tr>
      <td>ホンダ</td>
      <td>EG25i</td>
      <td>2500</td>
      <td>114,980</td>
      <td>29.9</td>
      <td>ガソリン</td>
      <td></td>
     </tr>
     <tr>
      <td>ヤマハ</td>
      <td>EF9HiS</td>
      <td>900</td>
      <td>87,991</td>
      <td>12.7</td>
      <td>ガソリン</td>
      <td>防音型</td>
     </tr>
     <tr>
      <td>ワキタ</td>
      <td>HPG1600i2</td>
      <td>1600</td>
      <td>93,500</td>
      <td>21.5</td>
      <td>ガソリン</td>
      <td>86</td>
     </tr>
     <tr>
      <td>工進</td>
      <td>GV-9i</td>
      <td>900</td>
      <td>57,958</td>
      <td>14</td>
      <td>ガソリン</td>
      <td>65～58</td>
     </tr>
    </tbody>
   </table>
CSS 

table {
  width:100% ;/* auto;*/ 
    /*border-collapse: collapse;*/
    border-spacing: 0;
  font-size:14px;
}
/* tableBR:青, tableGrR:グレー, tableYR:黄, tablePR:赤, tableGR:緑*/
.tableBR th, .tableGrR th, .tableYR th, .tablePR th, .tableGR th{
  padding: 8px 15px;
  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
  font-weight: bold;
  line-height: 120%;
  text-shadow:0 -1px 0 rgba(34,85,136,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableBR th {
  color: #fff;
  background: #258;
  border-left:1px solid #258;
  border-top:1px solid #258;
  border-bottom:1px solid #258;
}
.tableGrR th {
  color: #000;
  background: #eee;
  border-left:1px solid #aaa;
  border-bottom:1px solid #aaa;
}
.tableYR th {
  color: #000;
  background: #f4a460;
  border-left:1px solid #ff8c00;
  border-bottom:1px solid #ff8c00;
}
.tablePR th {
  color: #fff;
  background: #ff55aa;
  border-left:1px solid #ff55aa;
  border-bottom:1px solid #ff55aa;
}
.tableGR th {
  color: #000;
  background: #72e2aa;
  border-left:1px solid #72e2aa;
  border-bottom:1px solid #72e2aa;
}
.tableBR tr:first-child th {
}
.tableGrR tr:first-child th {
  border-top:1px solid #aaa;
  border-left:1px solid #aaa;
}
.tableYR tr:first-child th {
  border-top:1px solid #ff8c00;
  border-left:1px solid #ff8c00;
}
.tablePR tr:first-child th {
  border-top:1px solid #ff2b95;
  border-left:1px solid #ff2b95;
}
.tableGR tr:first-child th {
  border-top:1px solid #72e2aa;
  border-left:1px solid #72e2aa;
}

.tableBR tr:first-child th:first-child, .tableGrR tr:first-child th:first-child, .tableYR tr:first-child th:first-child, .tablePR tr:first-child th:first-child, .tableGR tr:first-child th:first-child {
  border-radius: 5px 0 0 0;	
}
.tableBR tr:first-child th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #258;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableGrR tr:first-child th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableYR tr:first-child th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #ff8c00;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tablePR tr:first-child th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #ff2b95;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableGR tr:first-child th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #72e2aa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableBR tr:last-child th:first-child, .tableGrR tr:last-child th:first-child, .tableYR tr:last-child th:first-child , .tablePR tr:last-child th:first-child, .tableGR tr:last-child th:first-child {
  border-radius: 0 0 0 5px;	
}
.tableBR tr:last-child th:last-child, .tableGrR tr:last-child th:last-child, .tableYR tr:last-child th:last-child, .tablePR tr:last-child th:last-child, .tableGR tr:last-child th:last-child {
  border-radius:0 0 5px 0;
}
.tableBR tr:last-child th:last-child {
  border-right:1px solid #258;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableGrR tr:last-child th:last-child {
  border-right:1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableYR tr:last-child th:last-child {
  border-right:1px solid #ff8c00;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tablePR tr:last-child th:last-child {
  border-right:1px solid #ff2b95;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableGR tr:last-child th:last-child {
  border-right:1px solid #72e2aa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableBR tr th:last-child {
  border-right:1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableGrR tr th:last-child {
  border-right:1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableYR tr th:last-child {
  border-right:1px solid #ff8c0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tablePR tr th:last-child {
  border-right:1px solid #ff2b95;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableGR tr th:last-child {
  border-right:1px solid #72e2aa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.tableBR td, .tableGrR td, .tableYR td, .tablePR td, .tableGR td {
  padding: 8px 15px;
  text-align: center;
}
.tableBR td{
  border-bottom: 1px solid #84b2e0;
  border-left: 1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.tableGrR td{
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.tableYR td{
  border-bottom: 1px solid #ff8c00;
  border-left: 1px solid #ff8c00;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.tablePR td{
  border-bottom: 1px solid #ff2b95;
  border-left: 1px solid #ff2b95;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.tableGR td{
  border-bottom: 1px solid #72e2aa;
  border-left: 1px solid #72e2aa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.tableBR tr td:last-child{
  border-right: 1px solid #84b2e0;
}
.tableGrR tr td:last-child{
  border-right: 1px solid #aaa;
}
.tableYR tr td:last-child{
  border-right: 1px solid #ff8c00;
}
.tablePR tr td:last-child{
  border-right: 1px solid #ff2b95;
}
.tableGR tr td:last-child{
  border-right: 1px solid #72e2aa;
}
.tableBR tr, .tableGrR tr, .tableYR tr, .tablePR tr, .tableGR tr{
  background: #fff;
}
.tableBR tr:nth-child(2n+1){
  background: #f1f6fc;
}
.tableGrR tr:nth-child(2n+1){
  background: #f5f5f5;
}
.tableYR tr:nth-child(2n+1){
  background: #fffaf0;
}
.tablePR tr:nth-child(2n+1){
  background: #fff4fa;
}
.tableGR tr:nth-child(2n+1){
  background: 	#eafff4;
}
.tableBR tr:last-child td, .tableGrR tr:last-child td, .tableYR tr:last-child td, .tablePR tr:last-child td, .tableGR tr:last-child td{
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.tableBR tr:last-child td:first-child, .tableGrR tr:last-child td:first-child, .tableYR tr:last-child td:first-child, .tablePR tr:last-child td:first-child, .tableGR tr:last-child td:first-child{
  border-radius: 0 0 0 5px;
}
.tableBR tr:last-child td:last-child, .tableGrR tr:last-child td:last-child, .tableYR tr:last-child td:last-child, .tablePR tr:last-child td:last-child, .tableGR tr:last-child td:last-child{
  border-radius: 0 0 5px 0;
}
.tableBR tr:hover, .tableGrR tr:hover, .tableYR tr:hover, .tablePR tr:hover, .tableGR tr:hover{
  cursor:pointer;
}
.tableBR tr:hover{
  background: #bbd4ee;
}
.tableGrR tr:hover{
  background: #eee;
}
.tableYR tr:hover{
  background: #f5deb3;
}
.tablePR tr:hover{
  background: #f8dcea;
}
.tableGR tr:hover{
  background: #d5ffea;
}
.tableBR tr:first-child td{
  border-top: 1px solid #84b2e0;
}
.tableGrR tr:first-child td{
  border-top: 1px solid #aaa;
}
.tableYR tr:first-child td{
  border-top: 1px solid  #ff8c00;
}
.tablePR tr:first-child td{
  border-top: 1px solid  #ff2b95;
}
.tableGR tr:first-child td{
  border-top: 1px solid  #72e2aa;
}
.tableBR tr:first-child td:first-child, .tableGrR tr:first-child td:first-child, .tableYR tr:first-child td:first-child, .tablePR tr:first-child td:first-child, .tableGR tr:first-child td:first-child{
  border-radius: 5px 0 0 0;
}
.tableBR tr:first-child td:last-child, .tableGrR tr:first-child td:last-child, .tableYR tr:first-child td:last-child, .tablePR tr:first-child td:last-child, .tableGR tr:first-child td:last-child{
  border-radius:0 5px  0  0;
}
.tableBR th, .tableGrR th, .tableYR th, .tablePR th, .tableGR th{font-weight:bold;}
.tableBR th, .tableGrR th, .tableYR th, .tablePR th, .tableGR th{text-align:left;}
.tableBR th.r, .tableGrR th.r, .tableYR th.r, .tablePR th.r, .tableGR th.r{text-align:right;}
.tableBR th.c, .tableGrR th.c, .tableYR th.c, .tablePR th.c.tableGR th.c{text-align:center;}
.tableBR td, .tableGrR td, .tableYR td, .tablePR td, .tableGR td{text-align:left;}
.tableBR td.r, .tableGrR td.r, .tableYR td.r, .tablePR td.r, .tableGR td.r{text-align:right;}
.tableBR td.c, .tableGrR td.c, .tableYR td.c, .tablePR td.c, .tableGR td.c{text-align:center;}

メーカー 製品名 ワット数 金額 重量 燃料 騒音
ホンダ 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="mobTableB">
     <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.mobTableB{
 width:100%;
 border-collapse:collapse;
 border-spacing:0;
 border:1px solid #ccc;
 padding:0;
 margin:0;
}
table.mobTableB tr{
 border:2px solid #3366cc;
 padding:5px;
}
table.mobTableB th, table.mobTableB td{
 padding:10px;
 text-align:center;
}
table.mobTableB th{
 font-size:14px;
 letter-spacing:1px;
 background-color:#3366cc;
 font-weight:bold;
 color: white;
}
@media screen and (max-width: 800px) {
 table mobTableB{
  border:0;
 }
 table.mobTableB thead{
  display:none;
 }
 table.mobTableB tr{
  margin-bottom:10px;
  display:block;
  border-bottom:2px solid #3366cc;
 }
 table.mobTableB td{
  display:block;
  text-align:right;
  font-size:13px;
  border-bottom:1px dotted #3366cc;
 }
 table.mobTableB td:first-child{
  background-color:#3366cc;
  font-weight:bold;
  color: white;
 }
 table.mobTableB td:last-child{
  border-bottom:0px;
 }
 table.mobTableB 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="mobTableB2">
    <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.mobTableB2{
  margin-left:10px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  width:96%;
  border-collapse:separate;
  border-spacing:2px;
  font-size: 100%;
}
table.mobTableB2 caption {
  margin-top: 0.3em;
  text-align: center;
  font-size:140%;
  color:#3366cc;
}
table.mobTableB2 tr{
 border:2px solid #3366cc;
 padding:5px;
}
table.mobTableB2 th, table.mobTableB2 td{
 padding:10px;
 text-align:center;
 background-color:floralwhite;
 border-bottom: solid 1px #B2B2B2;
 border-right: solid 1px #B2B2B2;
}
table.mobTableB2 th.r, table.mobTableB2 td.r{
 text-align:right;
}
table.mobTableB2 th.l, table.mobTableB2 td.l{
 text-align:left;
}
table.mobTableB2 th{

 letter-spacing:1px;
 background-color:#3366cc;
 font-weight:bold;
 color: white;
}
@media screen and (max-width: 800px) {
 table mobTableB2{
  border:0;
 }
 table.mobTableB2 thead{
  display:none;
 }
 table.mobTableB2 tr{
  margin-bottom:10px;
  display:block;
  border-bottom:2px solid #3366cc;
 }
 table.mobTableB2 td{
  display:block;
  text-align:right;
  font-size:13px;
  border-bottom:1px dotted #3366cc;
 }
 table.mobTableB2 td:first-child{
  background-color:#3366cc;
  font-weight:bold;
  color: white;
 }
 table.mobTableB2 td:last-child{
  border-bottom:0px;
 }
 table.mobTableB2 td:before {
  content:attr(data-label);
  float:left;
  font-weight: bold;
 }
}

モバイル対応の表3

学習進捗管理チェック表
問い番号 区分 第1回 第2回 第3回 第4回 第5回
問1 正誤
不安度		 ×
▲90		 ×
▲50		 〇
▲20		 〇
▲20		 〇
習熟
問2 正誤
不安度		 　 　 　 　 　
問3 正誤
不安度		 　 　 　 　 　
問4 正誤
不安度		 　 　 　 　 　
問5 正誤
不安度		 　 　 　 　 　
問6 正誤
不安度		 　 　 　 　 　

モバイル対応の表4

問1のスケジュール表
学習回数 学習予定日 学習実行日 正誤判定 自信度自己判定
第1回 　 6月1日 × 10%
第2回 6月2日 6月2日 × 50%
第3回 6月3日 6月3日 〇 80%
第4回 6月10日 　 　 　
第5回 　 　 　 　

問2の学習スケジュール表
回数 予定日 実行日 判定 自信度
第1回 　 6月1日 〇 10%
第2回 6月2日 6月2日 × 50%
第3回 6月3日 6月3日 〇 100%
第4回 6月17日 6月17日 〇 100%
第5回 7月17日 　 　 　

学習スケジュール設定ルール
自信度 正解 不正解
10% 1日 1日
50% 1日
80%
100%
連続2回
100%		 　

画面の横幅サイズをを考慮して表示を変えるテーブル

罫線使って伝票を表示

セルの罫線の有無
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;}

Sortable Table

jquery-uiを使って行を入れ替える。（行番号のリナンバリングなし）

No. タイトル 発売日
1 スプラトゥーン２1 2017年7月21日
2 スーパーマリオ・オデッセイ 2017年10月27日
3 アームズ 2017年6月16日
4 1-2-Switch 2017年3月3日
5 モンスターハンター XX 2017年8月25日
CODE
HTML 

   <table class="tableB">
   <thead>
     <tr>
       <th>No.</th>
       <th>タイトル</th>
       <th>発売日</th>
     </tr>
   </thead>
   <!--tbodyにID属性を指定します-->
   <tbody id="sortdata">
     <tr>
       <th name="num_data">1</th>
       <td class="l">スプラトゥーン２1</td>
       <td class="l">2017年7月21日</td>
     </tr>
     <tr>
       <th name="num_data">2</th>
       <td class="l">スーパーマリオ・オデッセイ</td>
       <td class="l">2017年10月27日</td>
     </tr>
     <tr>
       <th name="num_data">3</th>
       <td class="l">アームズ</td>
       <td class="l">2017年6月16日</td>
     </tr>
     <tr>
       <th name="num_data">4</th>
       <td class="l">1-2-Switch</td>
       <td class="l">2017年3月3日</td>
     </tr>
     <tr>
       <th name="num_data">5</th>
       <td class="l">モンスターハンター XX</td>
       <td class="l">2017年8月25日</td>
     </tr>
   </tbody>
   </table>
Javascript 

// 下記を読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
$('#sortdata').sortable();
CSS

jquery-uiを使って行を入れ替える。（行番号のリナンバリングを行う）

No.タイトル発売日
1スプラトゥーン２2017年7月21日
2スーパーマリオ・オデッセイ2017年10月27日
3アームズ2017年6月16日
41-2-Switch2017年3月3日
5モンスターハンター XX2017年8月25日
CODE
HTML 

   <table class="tableG">
    <thead>
     <tr><th>No.</th><th>タイトル</th><th>発売日</th></tr>
    </thead>
    <tbody id="sortdata2">
     <tr>
      <th name="num_data">1</th><td class="l">スプラトゥーン２</td><td class="l">2017年7月21日</td>
     </tr>
     <tr>
      <th name="num_data">2</th><td class="l">スーパーマリオ・オデッセイ</td><td class="l">2017年10月27日</td>
     </tr>
     <tr>
      <th name="num_data">3</th><td class="l">アームズ</td><td class="l">2017年6月16日</td>
     </tr>
     <tr>
      <th name="num_data">4</th><td class="l">1-2-Switch</td><td class="l">2017年3月3日</td>
     </tr>
     <tr>
      <th name="num_data">5</th><td class="l">モンスターハンター XX</td><td class="l">2017年8月25日</td>
     </tr>
    </tbody>
   </table>
Javascript 

// 下記を読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
$('#sortdata2').sortable();
// sortstopイベントをバインド
$('#sortdata2').bind('sortstop',function(){
  // 番号を設定している要素に対しループ処理
  console.log("ddd");
  $(this).find('[name="num_data"]').each(function(idx){
    // タグ内に通し番号を設定（idxは0始まりなので+1する）
    $(this).html(idx+1);
  });
});
CSS