【スポンサーリンク】

[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】

最近は、表のデザインで、縦の枠線を付けないことが多いようです。

Spotifyの「支払いに問題がある」?【クレジットカード情報の更新】より

確かに、スッキリした印象になります。

ブログ内の表を CSS を変更してみました。

border-width: 2px 0px;」という箇所が肝。
横線(border-top, border-bottom)は 2px
縦線(border-left, border-right)は 0px に指定されます。

/** 表の枠の色(縦線なし) 2023-03-02*/
.wp-block-table table {
	border-width: 2px 0px;
   border-color: rgba(0,0,0,.5);
}

.wp-block-table td,.wp-block-table th {
  border-color: rgba(0,0,0,.4);
	border-width: 1px 0px;
	background-color: white;
}

.wp-block-table table tr:nth-of-type(2n+1) {
	background-color: white;	
}

.wp-block-table th {
	background-color: #f7f9f9;
}

あとは、ついでに縞々模様も白に統一しました。
.wp-block-table table tr:nth-of-type(2n+1)」の箇所です。

本当は、表の一番上と一番下の枠線は太くしたかったのですが、うまく反映されていませんね。

こちらもどうぞ。

WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】
MacでWordPressのエディタにコピペをすると、<meta charset="utf-8">というタグが追加されてしまうことがあります。 これを放置すると、Google Search Consoleで「AMPエラー」になってしまいます。 検索結果にAMPページが除外されてしまうので、「表示の遅いページ」という評価になってしまいます。 ビジュアルエディターでは見つけにくいエラーなので、いちいち...
[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)
公開したブログ内の表の枠の色が、なぜか黒に変わっていました。 原因は、「style.min.css」。この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。 サイトの表の枠の色がおかしい? 表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。 どうも、デフォルトの色に戻ってしまっているようです。 Co...
[CSS] 記事一覧画面をスッキリさせた
記事一覧のページで、記事ごとにオレンジ色の枠で囲んであるのが、ちょっとうるさい気がしたので、CSSを修正しました。 /** 記事一覧画面をスッキリさせた*/ .list.ecb-entry-border .entry-card-wrap{ border-color: #e9e9e9; border-width: 0px; border-bottom-width: 1px; margin-botto...
QRコードを読み込むと、関連記事を確認できます。
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】
【スポンサーリンク】
タイトルとURLをコピーしました