[JavaScript][Handsontable]タブの切り替えを行うと、Handsontableで作成した表のヘッダが消える

開発環境、使用言語

Google Chrome
JavaScript
HTML5
CSS3

前提、実現したいこと

javascriptのライブラリ「Handsontable」を使って、簡単な表を作成しようとしています。その際、CSSを用いてタブの切り替えを実装し、Excelライクなシートの切り替えを行おうとしているのですが、思ったように描画されません。具体的には、表のヘッダが消失してしまいます。ただ、クリックをするとヘッダが出現するような動作になっていて、その原因を特定できていないような状態です。
こちらの症状について、原因をお教えいただければと思います

該当のソースコード
HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/defalut.css">
    <link rel="stylesheet" href="./css/handsontable.full.min.css">
  </head>
  <body>

    <nav>
      <a href='#sheet1'>sheet1</a>
      <a href='#sheet2'>sheet2</a>
      <a href='#sheet3'>sheet3</a>
    </nav>

    <div id='sheet1' class='content'>
      <div class="sheet_contents" id="grid1"></div>
    </div>
    <div id='sheet2' class='content'>
      <div class="sheet_contents" id="grid2"></div>
    </div>
    <div id='sheet3' class='content'>
      <div class="sheet_contents" id="grid3"></div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/handsontable.full.min.js"></script>


    <script>
    // 行列のヘッダーと幅
    var sheet1Data = {};
    sheet1Data.colHeaders = true;
    sheet1Data.rowHeaders = true;
    sheet1Data.colWidths  = 100;
    sheet1Data.rowHeights = 25;

    // シート生成
    var sheet1 = new Handsontable(document.getElementById("grid1"), sheet1Data);

    // 行列のヘッダーと幅
    var sheet2Data = {};
    sheet2Data.colHeaders = true;
    sheet2Data.rowHeaders = true;
    sheet2Data.colWidths  = 100;
    sheet2Data.rowHeights = 25;

    // シート生成
    var sheet2 = new Handsontable(document.getElementById("grid2"), sheet2Data);

    // 行列のヘッダーと幅
    var sheet3Data = {};
    sheet3Data.colHeaders = true;
    sheet3Data.rowHeaders = true;
    sheet3Data.colWidths  = 100;
    sheet3Data.rowHeights = 25;

    // シート生成
    var sheet3 = new Handsontable(document.getElementById("grid3"), sheet3Data);
    </script>

  </body>
</html>

CSS

.content {
  display: none;
}

.content:target {
  display: block;
}

行動規範の内容に同意します

回答1件

ベストアンサー

内部実装までは見ていませんが、表示状態から高さを取得しているようですので display:none のままで実行すると高さがなくなってしまうようです。
対症療法として、HTMLのcontentを別のものにしておいて、あとから適用してみてはどうでしょうか。

HTML
1    <div id='sheet1' class='content0'>
2      <div class="sheet_contents" id="grid1"></div>
3    </div>
4    <div id='sheet2' class='content0'>
5      <div class="sheet_contents" id="grid2"></div>
6    </div>
7    <div id='sheet3' class='content0'>
8      <div class="sheet_contents" id="grid3"></div>
9    </div>

JavaScript
1// Handsontable()実行後
2$('.content0').addClass('content').removeClass('content0');

投稿2018/06/01 01:34

x_x

総合スコア13749

m_k_

2018/06/01 13:26

返信が遅くなってしまい、大変申し訳ありません。 display:noneが悪影響を与えているのかと考えを進めつつ、何故なのかが分からない状態でしたので、表示状態から高さを取得するという情報、非常に助かりました。ご指摘を受けて手直しをした結果、何とか望んだ表示となりました。ありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！