作成したHTMLテーブルを別のHTMLファイルに埋め込んで表示させたい!と思ったので、その方法をメモ。
HTMLの埋め込みは、iframe
タグで実装できる。
<iframe src='パス/ファイル名.html'></iframe>
試しに前回記事で作ったHTMLテーブルを埋め込んでみる。
【VBA & HTML】ExcelのテーブルをHTML形式に変換する - こちにぃるの日記
HTMLは以下。
<!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf8'> <title>Top</title> <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script> <style type='text/css'> #header{ background-color: #CBFFD3; position: fixed; top: 0px; left: 0px; width: 100%; height: 75px; border: 5px solid #fff; } #main_body{ padding:75px 0 75px; top: 75px; } .side { background-color:#FFFFEE; width:10%; overflow-y: scroll; border: 5px solid #fff; } .fixed{ position:fixed; top:75px; width: 300px; } .content { width:90%; margin-left:20px; } article { display:flex; } </style> <script type='text/javascript'> $(function($) { var tab = $('.sidebar'), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass('fixed'); } else { tab.removeClass('fixed'); } }); }); </script> </head> <body> <div id='header' style='font-size:30px;'>タイトルXXX</div> <article id='main_body'> <div class='side'> <div class='sidebar'> <p>目次</p> <ol> <li><a href='#Table1'>テーブル1</a></li> <li><a href='#Table2'>テーブル2</a></li> <li><a href='#Table3'>テーブル3</a></li> </ol> </div> </div> <div class='content'> <hr/> <div id='Table1'>■テーブル1</div> <iframe width='90%' height='500px' src='./SampleHTMLtable.html' frameborder='0'></iframe> <br/> <hr/> <div id='Table2'>■テーブル2</div> <iframe width='40%' height='200px' src='./SampleHTMLtable.html' frameborder='0'></iframe> <br/> <hr/> <div id='Table3'>■テーブル3</div> <iframe width='70%' height='500px' src='./SampleHTMLtable.html' frameborder='0'></iframe> <br/> </div> </article> </body> </html>
うまくHTMLテーブルを表示できた。
サイドメニューの設定は以下サイト様を参考にさせていただきました。
直帰率改善に!スクロールしてもサイドバーを固定して記事一覧を表示する方法 | イズクル