WordPress ・スマホでのみtableを縦並びに（htmlのみで）

前提・実現したいこと

「WordPressで、スマホのみtable要素を縦並びにしたい」

ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

ユーザーの権限がなくCSSなどのページを使用する権限がなく
htmlページ（投稿ページ）のみを使用しています。

該当のソースコード

<table class=" aligncenter" style="height: 245px; width: 100%;"> <tbody> <tr style="height: 228.859px;"> <td style="width: 53%;"> <p style="text-align: left;">テキストテキストテキストテキスト</p> </td> <td style="width: 53%;"><img＝画像></td> </tr> </tbody> </table>

試したこと

表のレスポンシブ化は試しましたが
2マスの表のため、単純に表全体が縮んでスマホの画面内に表示されました。
1マスは下に落とした状態（縦並び）で表示させたいです。

当方、初心者のため、スキルも質問力も低く、ご迷惑をおかけしますが
ご協力いただけますと幸いです・・・
どうぞ、よろしくお願いいたします。

spookybird

2018/09/11 02:29

tableタグをやめるっていう選択肢はないんでしょうか？

tommato

2018/09/11 02:41

divにして、floatで並べてみたところ、無事縦に並びました！ありがとうございます。次は、マージンをpxで指定したため余白の調整が上手くいかず・・・頑張ります；；

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

回答1件

ベストアンサー

https://jsfiddle.net/zp5egdvL/11/
こんなんじゃダメですかね？

ちなみに<body>の中に<style>も<script>も書けますので、HTMLが編集できるならなんだって可能ですよ。
まさかWordpressがそれ自体禁止してたりは...しないと思うんですが...たぶん…？

html
1<style>
2.container {
3  width: 100%;
4  display: flex;
5  flex-wrap: wrap;
6  justify-content: center;
7}
8.text-item {
9  flex-basis: 450px;
10  flex-grow: 1;
11}
12.image-item > img {
13  width: 500px;
14}
15</style>
16<div class="container">
17  <div class="text-item">
18    <p>愛の南京錠（あいのなんきんじょう、英語: Love padlocks）とは、恋人たちが永遠の愛の象徴として南京錠をフェンスや門扉、橋などの公共設備にかける儀式である。
19
20  その対象となる場所は世界中で増え続けており[1]、鍵をかけるためのモニュメントが特設された土地もあるが、景観を損ねるだけでなく安全性に問題が出る恐れもあることから、世界各地で撤去作業が行われている。1990年代から2000年代の初めにかけてみられるようになった現象で、その起源については定かではないが、セルビアやイタリアなどでは発祥となった伝説や作品まで遡ることができる。</p>
21  </div>
22  <div class="image-item">
23    <img src="https://libreshot.com/wp-content/uploads/2016/01/love-hearth.jpg" />
24  </div>
25</div>

投稿2018/09/11 02:45

spookybird

総合スコア1803

tommato

2018/09/11 03:55

ありがとうございます！！さっそくやってみました！無事に、スマホサイズにした場合には上手くできたのですが、逆に今度はPCサイズの場合に横並びになってくれなくなりました。教えていただいた通りにしているはずなのですが・・・；；よくある効かない原因などあれば、教えていただければ幸いです。。おいそがしいところ申し訳ありません・・・