スマートかどうかはわかりませんが、
Bootstrap 4 ではレスポンシブ対応するために、
下記のようにスクロールするようになっているようです。
参考サイト
HTML
<div class="table-responsive">
<table class="table">
...
</table>
</div>
CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
P.S.
BizVektor を一時期使用していたみたいですが、( github から判断 )
同じ作者がリリースしている Lightning は Bootstrap 3 ベース
( 夏には Bootstrap 4 にも対応予定らしい ? )
で作られたテーマなのでより簡単に実装可能だと思います。
RICKさん､ご回答､ありがとうございまーす !
該当ウェッブページは､こちらです｡
https://tsurumaki-office.com/sukino_hataraki/
レスポンシブにあたっては､ピクセルの大きさにより条件を分岐させ､対応しています｡ただし､宣言（プロパティと値）については､記述直後は理解していたと思うのですが､現在､改めてみたところ､理解があやしくなっています :-）
@media (max-width: 650px) {
table td{
display: block;
padding: 0.6em;
text-align: center;
}
}
で､手持ちのMacBookAirとiPhoneでは､うまく表示されていたのですが､せんじつ（ショップに置いてある）iPadProを､なにげに､チェックしたところ､画像が､はみだしていたのですね〜､というわけで､当質問に至りました｡
BootStrap4ということです､ね｡すみません､勉強不足です｡こちらを活用した場合､テーブルによるレイアウト&レスポンシブの利点は､どういう感じになりますでしょうか｡
ま､それ以前に､テーブルというのは､そもそもセルのように使うものであって､レイアウトに使うのは適していないような気もし出したりして…
末筆になりましたが､WordPressとは離れてしまった内容になってしまっていることを､ご容赦くださいませ｡
P.S.
ご指摘のとおり､以前はBizVectorを利用させて頂いていましたが､げんざいのテーマはTWENTY SEVENTEENとなっております｡
手持ちのMacBookAirとiPhoneでは､うまく表示されていたのですが､せんじつ（ショップに置いてある）iPadProを､なにげに､チェックしたところ､画像が､はみだしていたのですね〜､というわけで､当質問に至りました｡
画像がはみ出すも問題は、CSSに下記を追記すれば解決すると思います。
img {
max-width: 100%;
}
BootStrap4ということです､ね｡すみません､勉強不足です｡こちらを活用した場合､テーブルによるレイアウト&レスポンシブの利点は､どういう感じになりますでしょうか｡
テーブルにおける利点はスクロールが可能になるので変なところで折り返す必要がなくなるということが挙げられます。
Bootstrap は横並びの数をデバイスの幅によって制御できます。
例えば Bootstrap 3 を適用していて、下記を記述を何回か繰り返した場合
<div class="col-12 col-sm-6 col-md-4 col-lg-3">（略）</div>
- 767pxまでの場合は1列表示
- 991pxまでの場合は2列表示
- 1199pxまでの場合は3列表示
- 1200px以上の場合は4列表示
となります。
ようは、全体を12としてその部分にいくつ使うかを
col-xx-yyで割り当てることで横並びを制御できます。
また、そこそこ面白い機能も付いているのでページ作成が楽しくなると思います。
Bootstrap､おもしろそうですねぇ｡連休の後半を使って､勉強してみまーす!
