関西OAMのキー局運用では、交信（チェックイン）していただいたときのログをブログで公開することになっています。

また、わたし個人の運用についても同様にしています。

内容としては、時刻・コールサイン・レポート・運用地のほか、周波数帯やデジコミの場合は距離なんかも入ってきたりします。

適当なスプレッドシートにまずそれらをまとめます。

そして、それをhtmlに変換してブログに掲載し、それをiPhoneで閲覧すると・・・

セルの中で改行されてしまっている上に罫線も表示されないので、すごく見にくい表になります。

本当は、セルの中で内容を改行させずに、表を横にスワイプさせて閲覧できるようにしたいのですが、これにはちょっとした手間が必要。

コンピュータでアクセスしてくださるユーザーに対してはスタイルシートにセルに罫線を引くこと、セル内での改行禁止、横スクロールの有効化などを記したCSSを書き込んでおけば、それを読んでくれるのでOKなのですが、iPhoneでamebloにアクセスした人に対しては、なぜかamebloがスタイルシートをiPhoneユーザーに読ませません。Androidユーザーに対してもですか？　罫線は出ないわ、セル内で改行されちゃうわ・・・なのであんな見にくい表になります。

iPhoneユーザーにもCSSを適用するには、スタイルシートにではなく記事本文のhtmlの中に強制的にCSSを書いてしまうしかありません。

ということで、四苦八苦しまして、iPhoneでもiPadでもMacでもWindows PCでも横の表示領域をはみ出た表は、横にスクロールできる方法を発見しました。

以下はそのやり方です。自分用の備忘録ですが、他の方にも参考になれば幸いです。

まず、適当なスプレッドシートにログをまとめ、それをhtmlに変換します。あえて、とんでもなく横長な表にしました。

<table>

    <tr>

        <td>7:00</td>

        <td>かんさいAB101/3局</td>

        <td>59/59</td>

        <td>DCR 56ch</td>

        <td>兵庫県神戸市東灘区六甲山最高峰</td>

    </tr>

    <tr>

        <td>7:06</td>

        <td>とうきょうTK03/1局</td>

        <td>53/53</td>

        <td>CB 8ch</td>

        <td>東京都港区移動</td>

    </tr>

    <tr>

        <td>7:10</td>

        <td>とかちAA123/8局</td>

        <td>55/54</td>

        <td>CB 8ch</td>

        <td></td>

    </tr>

    <tr>

        <td>7:13</td>

        <td>すいた101局</td>

        <td>51/51</td>

        <td>LCR 15ch</td>

        <td>大阪府吹田市阪急京都線山田駅隣接ビルの屋上駐車場（10km）</td>

    </tr>

    <tr>

        <td>7:15</td>

        <td>おおさかN700/3局</td>

        <td>59/59</td>

        <td>LCR 15ch</td>

        <td>東海道山陽新幹線上り新大阪駅停車中の列車（20km）</td>

    </tr>

</table>

たぶん表示が崩れていますよね^^;

まず、<table>要素全体を、<div style_="overflow: auto;"></div>でくくります。これによって表示領域からはみ出した場合に横スクロールになります。

次に<table>にstyle属性をつけたし、<table style_="border-collapse: collapse; white-space: nowrap;">とします。これによってセル罫線の重ね合わせと、表内改行禁止を実現しています。

さらに、<td>にstyle属性をつけたし、<td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">とします。これでセル内余白の確保と、セルの罫線を描画しています。

先ほどのログはこうなります。

<div style_="overflow: auto;">

<table style_="border-collapse: collapse; white-space: nowrap;">

    <tr>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">7:00</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">かんさいAB101/3局</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">59/59</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">DCR 56ch</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">兵庫県神戸市東灘区六甲山最高峰</td>

    </tr>

    <tr>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">7:06</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">とうきょうTK03/1局</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">53/53</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">CB 8ch</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">東京都港区移動</td>

    </tr>

    <tr>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">7:10</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">とかちAA123/8局</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">55/54</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">CB 8ch</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;"></td>

    </tr>

    <tr>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">7:13</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">すいた101局</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">51/51</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">LCR 15ch</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">大阪府吹田市阪急京都線山田駅隣接ビルの屋上駐車場（10km）</td>

    </tr>

    <tr>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">7:15</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">おおさかN700/3局</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">59/59</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">LCR 15ch</td>

        <td style_="padding: 0px 10px 0px 5px; border: 1px #000000 solid;">東海道山陽新幹線上り新大阪駅停車中の列車（20km）</td>

    </tr>

</table>

</div>

これでできました。

ちなみに、関西OAMのブログのチェックインログを整理していて初めて知ったのですが、amebloにはHTMLタグも含めて、1記事につき、6万文字までという文字制限があるようです。このやり方で表の表示を整えていると、2025年第一回関西OAMの5部門分のログが1記事におさまらなくなりましたので、2つに分割しました。