WordPress 表の罫線強制表示

WordPress 表の罫線強制表示

表の罫線はテーマ依存か?

WordPress で表を作るとき、テーマに依存するんだと思うんですが、
罫線が表示されたり表示されなかったりします。

少なくとも、Markdown で入力すると、表の罫線の設定はできません(たぶん)

「こうなっちゃうんですよ(設定前)」例:
設定前

この表示の方がしっくりするという人や場合も多いとは思うんですが、
個人的には、どうも落ち着かないです。


テーマ Sparkling で罫線を強制表示するには

コンテンツを表示して、Chromeのデベロッパーツールで、確認したところ tableタグは、

<table class=" table table-hover">

だったので、
table.table.table-hover の th と td に罫線を設定すれば、強制表示できます(たぶん)。

副作用が、出ないともかぎりませんが・・・まぁそんときはそんとき


footer.php の書き換え

テーマのファイルを書き換えるのは最小限にとどめたいですが、
別の対策(このリンクが別ウィンドウで開くようにする対策)で、
既に footer.php を書き換えていたので、同じ場所に入れちゃいました。

wp-content/themes/sparkling/footer.php の最後に近いあたりに、

<script type="text/javascript">
jQuery(function() {
    jQuery("table.table.table-hover th, table.table.table-hover td").css('border','1px solid #cccccc');
});
</script>

を入れると、強制表示できます。


そういうわけで、このサイトの footer.php は、現在

<script type="text/javascript">
jQuery(function() {
    var atags = $("a[href$='#_blank']");
    for(const atag of atags) {
        jQuery(atag).attr('target', '_blank');
        str = jQuery(atag).attr('href').slice(0, -7);
        jQuery(atag).attr('href', str);
    }
    jQuery("table.table-hover th, table.table-hover td").css('border','1px solid #cccccc');
});
</script>

を追加してあります。

で、この対応により
「こうなります(設定後)」例:
設定後
のようになります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です