Jettheme Bootstrap5 / table を自動でレスポンシブにする
<!-- markdown-mode-on -->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6tkuCAB6zwNyTYCvTrA07cGstQGH7GBjCipsk3a6HoUiKVea-159v4oK4uq7qhXUjbbnX0Hm5Fds5sw7iiCzhqObJHwcnKQEf9-0iAqgpH6bSzH6FxQCVVBh-XrghyphenhyphenMUwaIjVewBQXI/s1600/jettheme-cover.png" style="
display: none;"/>
## 概要
JetthemaはBootstrapを使っています。そして、Bootstrapは レスポンシブ対応です。つまり、
```html
<div class="table-responsive">
<table class="table">
...
</table>
</div>
```
で table を囲めば、スマホやタブレットでは表が横スクロールするようになります。
[情報元：Responsive tables | Tables (テーブル) · Bootstrap v5.0](https://getbootstrap.jp/docs/5.0/content/tables/#responsive-tables)
表の大きさを考えなくても、スマホやタブレット、もちろんPC画面でも、横幅の大きな表には**レスポンシブ用の囲みを自動で設定**できると、とても便利だと思います。
---
<a name="more"></a>
## .table-responsive クラスの自動適用スクリプト
```javascript
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
const tables = document.querySelectorAll('table');
const thresholdWidth = 768;
tables.forEach(table => {
if (table.offsetWidth > thresholdWidth && !table.closest('.table-responsive')) {
const wrapper = document.createElement('div');
wrapper.classList.add('table-responsive');
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
}
});
});
//]]>
</script>
```
## スクリプトの働き：誤解を避けるため
このスクリプトにより `.table-responsive` クラスの自動適用は、**元の `table` 要素を書き換えます（DOM構造を直接変更します）。**
この意味は、**スクリプトが実行された結果として、ブラウザが最終的に描画するDOM（Document Object Model）の構造が変化する**という意味です。
補足すると、**HTMLソースコードそのものが書き換わるわけではありません。**
具体的には、スクリプトは以下の処理を行います。
1. **サーバーがHTMLを送信:** サーバーは、`<div class="table-responsive">` や `</div>` が含まれていない元のHTMLをクライアント（読者のブラウザ）に送信します。
2. **ブラウザがHTMLを解析し、DOMを構築:** ブラウザは受け取ったHTMLを解析し、DOMというページの構造をメモリ上に作成します。この時点では、HTMLソースコード通り、`<table>` 要素は単独で存在しています。
3. **JavaScriptの実行:** ブラウザがHTMLを解析し終えると、`<script></script></table>