シリウスは、アフィリエイター御用達のホームページ作成ソフトです。 市販のホームページ作成ソフトに比べて、簡単にホームページを作ることもできます。

しかも、上位版ならスマホサイトも同時に作れるので便利です。

 

実は、シリウスでサイトを作ってiPhoneで表示させた時にテーブル(表)があると、テーブルの右と下の線が消える問題がありました。

 

サポートフォーラムでも同じ事例が質問されていたのですが、回答は書かれていませんでした。

今回のこの問題の原因を調べて対策をしました。 原因は、cssにあります。

iPhone用のテンプレートのcssファイルでは、デフォルトで

table,td,th{ border:solid 1px #CCC; overflow:hidden; }

のような記述があります。この中で overflow:hidden; があるとテーブル内の文字がオーバーフローする時に、文字を表示しないようになるのですが、これがあるとテーブルの線が消えてしまうのです。 そのため、下記のように修正をしました。

table,td,th{ border:solid 1px #CCC; overflow:visible; }

これだと、テーブル内の文字がオーバーフローしても、文字を表示します。

しかし、線をはみ出して文字が表示されるので、見栄えがよくありません。 そのために、下記を追加します。

word-break: break-all;

これを追加することで、文字を折り返して表示することができます。

FirefoxとかOperaでは、効果がないらしいですが、スマートフォンだと、SafariかChromeなので問題ないかと思います。

参考 http://911.ddtea.com/?eid=1286781 http://piyopiyocs.blog115.fc2.com/blog-entry-342.html