表の罫線

2016年7月5日 at 13:56

表の罫線が表示されません。編集中は表示されますが、公開すると罫線がありません。過去のフォーラムで、同様のものがあり、テーマの変更したら罫線が表示されたとあり、無料テーマ全部(Fruitful, Stucco, Cloneamental, Neat, Elemental)で試しましたがダメでした。
どうすればよろしいのか、おしえてください。よろしくお願いします。
(初心者ですが、投稿者へ返信という設定は、人の手を借りてできました。) 

concrete5バージョン:5.7.5.8
PHPバージョン:5.6.21
サーバー会社:ロリポップ
パソコン:Win10

過去ログでは罫線表示ができたのは、Plain Yogurt,Grean Salad, Dark Chocolate
罫線表示ができなかったのはGreek Yogurtとありました。

タグ:

Re: 表の罫線

2016年7月6日 at 6:03
もしかすると編集中に見えている罫線というのは添付画像のようなものでしょうか?
だとすれば、これは編集用の各セルの区切り線ですから編集から抜ければ見えなくなります。
一番簡単なのは編集メニューの </> と書かれたアイコンをクリックして html 編集画面に行き、一番上の <table> と書かれた行を <table border="1"> と直してみてください。
編集から抜けても見える罫線が引かれていると思います。
添付: table.png
 

Re: 表の罫線

2016年7月6日 at 8:14
zapsgate さん

ありがとうございます。添付のもののことです。

教えていただいた通りにやってみたのですが、状況が変わりませんでした。
超初心者なので、私がやったことを記させていただきます。

変更後 パターン1は、一番上に<table>というのがなかったので、<table>と表記されている行を教えていただいたように変更

変更後 パターン2は、一番上に教えていただいたものを挿入したもの。(しかし公開後、あけてみたら、はりつけた通り内容が変わっていました。)

私の理解不足もあろうかと思いますが、教えていただけたらありがたいです。

・当初
<ol>
</ol>
<p><br>
</p>
<table>
<tbody>
<tr>
<td>1

・変更後 パターン1
<ol>
</ol>
<p><br>
</p>
<table border="1">
<tbody>
<tr>
<td>1

・変更後 パターン2
<table border="1">
<ol>
</ol>
<p>
<br>
</p>
<table>
<tbody>
<tr>
<td>1

・変更後 パターン2を保存し公開後、HTMLをあけてみたら以下の表記
<ol>
</ol>
<p><br>
</p>
<table border="1">
<tbody>
<tr>
<td>1

以下、書き足しました。
・当初というところにはりつけたものの<table>より上のものは空白の設定とわかりました。また現在作業中のページがおかしいのかもしれないと思い、別ページで空白を削除し、教えていただいたもので1行目を書き換えましたが、ダメでした。以下の通りです。
<table border="1">
<tbody>
<tr>
<td>qq

よろしくお願いいたします。

Ton
 

Re: 表の罫線

2016年7月6日 at 9:09
おかげさまで、解決(?)しました。ありがとうございました。

zapsgateさんが教えてくださった「一番上の <table> と書かれた行を <table border="1"> と直して」で、Fruitful以外では罫線が表示されました。
無料テーマ全部(Fruitful, Stucco, Cloneamental, Neat, Elemental)で試してみました。
試した方法は以下の通りです。
管理画面→ページとテーマ→テーマでインストールしたテーマを選び「有効」で表を挿入したページを確認。

私はFruitfulで作業をしており、この問題にぶちあたりました。Fruitfulだけが、何度上記の方法で表示させてもダメでした。Fruitful以外のテーマを選定することにしました。

引き続き、がんばりたいと思います。
ありがとうございました。

Ton
 

Re: 表の罫線

2016年7月7日 at 14:23
Ton さま

解決されたということですが、補足させてください。
表の罫線が表示されないのは、Bootstrap というフレームワークを使用しているためです。
Bootstrap には、テーブルの枠線や行の色を交互に変更するクラスが用意されていますので、基本は枠線無しです。

<table class="table-bordered">

↑枠線
<table class="table-striped">

↑行の色

上記を記述するとグレーの枠線が付くはずです。

カスタマイズ可能なテーマの場合は、ツールバーのギアアイコン > デザイン > カスタマイズの一番下にある『カスタムCSS』に
table, th, td {
border: solid 1px #ccc;
}

を記述すれば、枠線を表示します。

また、デザインカスタマイズ非対応の Fruitful で枠線を表示したい場合は、

<style>
table, th, td {
border: solid 1px #ccc;
}
</style>
<table>

のようにエディタに直接記述すれば、枠線を表示するようになると思いますが、次回エディターで編集すると記述がおかしくなる...

なので、デザインカスタマイズ対応のテーマで、カスタムCSS に記述する方法がいいと思います。

よろしくお願いします。
 

Re: 表の罫線

2016年7月7日 at 17:18
nipper さま。

ありがとうございます。
Fruitfulは罫線が引けなかったので対象から除外していましたが、検討に加えたいと思います。初心者でいろいろと難しい部分もありますが、機能が必要になったときにこちらのフォーラムを見返すことができるのでありがたいです。
ありがとうございました。

Ton
 

Re: 表の罫線

2016年7月7日 at 14:53
追加です。

追加ヘッダー要素に記述するのが一番いいかもです。

ギアアイコン > 属性 の『追加ヘッダー要素』に
<style>
table, th, td {
border: solid 1px #ccc !important;
}
</style>

と記述すれば枠線を表示すると思います。(読み込む順番で『!important』をつけないとダメみたい)

よろしくお願いします。
 

Re: Re: 表の罫線

2016年7月7日 at 17:19
nipper さま

こちらもありがとうございます!
さらに便利なやり方を教えてくださり、ありがとうございました。

Ton