複数カラムレイアウトのサイトで表の幅を広げられるようにする

1. 問題点
2. 対策
3. コードサンプル
4. おわりに

1. 問題点

このサイトは２カラムレイアウトです（少なくても今の時点では）。左カラムには記事が、右カラムにはサイドバーが表示されます。

このようなレイアウトの場合、メイン側に幅の広い表 (<table>タグ) を記述しても、表の幅が狭くなってしまい非常に見にくくなります。

2. 対策

そこで本記事では、表の幅を広げるボタンを追加する方法を紹介します。

本サイトの無料ブログサービスの比較というページで使っていますので、具体的な動きはそちらで確認してください。

以下のスクリーンショットでも、だいたいの動きが分かると思います。

3. コードサンプル

ここでは、WordPress を使っていることを想定し、1つの「カスタムHTML」ブロックに、必要なコードを全て記述する例について説明します。

まず、「カスタムHTML」ブロックに記述する内容の全体的な構成は以下になります。

<style>
  省略
</style>

<script>
  省略
</script>

<button id="grh2TPvhG864RVqg">拡大</button>

<div style="overflow:auto;">
  <table id="tC5Aq8RFzPn3jqpx">
  省略
  </table>
</div>

<button> と <table> には id 属性を指定しており、ランダムな文字列をセットしています。スタイルシートや JavaScript では、この id 値を使って各要素にアクセスしますが、このとき間違って他の要素にアクセスしてしまわないために、ランダムな文字列にしました。”password generator” でウェブを検索すると、パスワード生成ができるサイトが見つかりますので、そういうサイトで文字列を生成することができます。ちなみに id 値は数字から始まってはいけません。
<table> を <div style="overflow:auto;"> で囲うことによって、拡大前の時点で表が横スクロールできるようにしています。こうしておくと便利です。

<script> タグの中身は以下になります。

window.addEventListener('DOMContentLoaded', (event) => { 
  let flg = true, parentOverflow, parentWidth, width, position, backgroundColor, boxSizing;
  const btn1 = document.querySelector('#grh2TPvhG864RVqg'); 

  btn1.addEventListener('click', function() { 
    const tbl1 = document.querySelector('#tC5Aq8RFzPn3jqpx'); 
    const parent = tbl1.parentElement;

    if (flg) { 
      parentOverflow = parent.style.overflow;
      parentWidth = parent.style.width;
      width = tbl1.style.width; 
      position = tbl1.style.position; 
      backgroundColor = tbl1.style.backgroundColor; 
      boxSizing = tbl1.style.boxSizing; 

      parent.style.overflow = ''; 
      parent.style.width = tbl1.style.width =
        window.innerWidth - tbl1.getBoundingClientRect().left - 20 + 'px'; 
      tbl1.style.position = 'relative'; 
      tbl1.style.backgroundColor = parent.style.backgroundColor || 'white'; 
      tbl1.style.boxSizing = 'border-box'; 
      btn1.textContent = '元に戻す';
    } else { 
      parent.style.overflow = parentOverflow; 
      parent.style.width = parentWidth;
      tbl1.style.width = width; 
      tbl1.style.backgroundColor = backgroundColor; 
      tbl1.style.position = position; 
      tbl1.style.boxSizing = boxSizing; 
      btn1.textContent = '拡大する';
    } 
    flg = !flg; 
  }); 
});

大雑把にいうと「ボタンがクリックされたら、table 要素のプロパティを変更して幅を広げ、もう一度ボタンが押されたら元の値に戻す」とうことをやっています。<table>を囲っている <div> の style 属性値も合わせて変更しています。
Chrome の場合は、div の width を変更しなくても、表の横幅を変えることができましたが、Firefox ではそうはなりませんでした。なので、div の width (= parent.style.width)も表の横幅の長さに変更しています。
「- 20」となっているところは、幅の微調整です。このあたりなどは、もっとよい書き方があるかもしれません。

<style> は絶対必要というわけではありませんが、例えば以下を記述します。

@media print, screen and (max-width: 960px) {
  button#grh2TPvhG864RVqg{
    display: none;
  }
}

スマートフォンで表示した場合は、全体の幅が狭いので「拡大」機能が使えません。なので、スマートフォンの場合はボタンを非表示にしています。

4. おわりに

ここで取り上げたカラムレイアウトとは異なる場合でも、本記事のサンプルコードを改造すれば表の幅を変えられると思います。