CSSとJavascriptでレスポンシブテーブルを作る(パターン1)

CSSとJavascriptでレスポンシブテーブルを作る(パターン1)

~ウィンドウ幅640px以上だと通常テーブルで、幅640px以下だと切り替わるレスポンシブテーブル


640px以上か640px以下で以下のように切り替わります

ウィンドウ幅
640px以上
ウィンドウ
幅640px以下

実際の例

ウィンドウ幅640px以上だと通常テーブルで、幅640px以下だと切り替わります

出版社 出版日 書籍名
mam書籍社 2000/01/31 CSSとJavascriptでレスポンシブ
mam出版 2002/03/11 できるJavascript
mam文庫 2005/11/23 できるCSS

速度 サイズ 形状 GIFファイル
ピンク 遅い 32x32 2D-1
遅い 64x64 2D-2
普通 32x32 2D-3
遅い 64x64 3D-5
遅い 64x64 3D-6

ソースコード

<!DOCTYPE html>
<html>
<head>
<style>
  table.mamTableResponsive {
    width:100%;
    border-collapse:collapse;
    border:none;
    border-spacing:0;
    table-layout:auto;
  }
  table.mamTableResponsive th {
    box-sizing:border-box;
    background: #7AF;
    border: solid 1px #ccc;
    color: #fff;
    margin:0;
    padding:10px;
  }
  table.mamTableResponsive td {
    box-sizing:border-box;
    border: solid 1px #ccc;
    color: #000;
    margin:0;
    padding:10px;
  }
  table.mamTableResponsive .mamBottomBorderThick{
    border-bottom:solid 1px #333;
  }
  table.mamTableResponsive .mamBottomBorderThin{
    border-bottom:solid 1px #ccc;
  }
</style>
<script>
  const threshW=640;
  var mamTblRes=[];
  window.addEventListener('DOMContentLoaded',function(){
    let i,j,k;
    var tbl=document.querySelectorAll('table.mamTableResponsive');
    for(i=0;i<tbl.length;i++){
      let th=tbl[i].querySelectorAll('thead');
      let tb=tbl[i].querySelectorAll('tbody');
      if(th.length==1 && tb.length==1){
        let arr={};
        arr["table"]=tbl[i];
        arr["thead"]=th[0];
        arr["tbody"]=tb[0];
        mamTblRes.push(arr);
      }
    }
    for(i=0;i<mamTblRes.length;i++){
      let tb=document.createElement('tbody');
      for(k=0;k<mamTblRes[i].tbody.children.length;k++){
        for(j=0;j<mamTblRes[i].thead.children[0].children.length;j++){
          let tr=document.createElement('tr');
          tr.appendChild(mamTblRes[i].thead.children[0].children[j].cloneNode(true));
          tr.appendChild(mamTblRes[i].tbody.children[k].children[j].cloneNode(true));
          if(j==(mamTblRes[i].thead.children[0].children.length-1)){
            tr.children[0].classList.add("mamBottomBorderThick");
            tr.children[1].classList.add("mamBottomBorderThick");
          }else{
            tr.children[0].classList.add("mamBottomBorderThin");
            tr.children[1].classList.add("mamBottomBorderThin");
          }
          tb.appendChild(tr);
        }
      }
      mamTblRes[i]["tbodyR"]=tb;
    }
    mamTableResponsive();
  },false);
  function mamTableResponsive(){
    let i;
    if(mamTblRes.length>0 && window.innerWidth<threshW){
      for(i=0;i<mamTblRes.length;i++){
        if(mamTblRes[i].table.getElementsByTagName("thead").length>0){
          mamTblRes[i].table.appendChild(mamTblRes[i].tbodyR);
          mamTblRes[i].table.removeChild(mamTblRes[i].thead);
          mamTblRes[i].table.removeChild(mamTblRes[i].tbody);
        }
      }
    }else{
      for(i=0;i<mamTblRes.length;i++){
        if(mamTblRes[i].table.getElementsByTagName("thead").length==0){
          mamTblRes[i].table.removeChild(mamTblRes[i].tbodyR);
          mamTblRes[i].table.appendChild(mamTblRes[i].thead);
          mamTblRes[i].table.appendChild(mamTblRes[i].tbody);
        }
      }
    }
  }
  window.addEventListener('resize',function(){
    mamTableResponsive();
  },false);
</script>
</head>
<body>
  <table class="mamTableResponsive">
    <thead>
      <tr>
        <th>出版社</th>
        <th>出版日</th>
        <th>書籍名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>mam書籍社</td>
        <td>2000/01/31</td>
        <td>CSSとJavascriptでレスポンシブ</td>
      </tr>
      <tr>
        <td>mam出版</td>
        <td>2002/03/11</td>
        <td>できるJavascript</td>
      </tr>
      <tr>
        <td>mam文庫</td>
        <td>2005/11/23</td>
        <td>できるCSS</td>
      </tr>
    </tbody>
  </table>
</body>
</html>




Mam's WebSite