HTMLでブラウザの表示幅が狭い時にテーブルの右側が切れるのを防ぐ

Octopressでブログを書く時に Markdown記法でテーブルを書くことが出来ますが、 そのままtableを使うと幅が大きい時に右側が切れてしまうことがあるので ちょっと調整。

• テーブル調整

テーブル調整

やったことはtable要素をscroll: overflowのスタイルを持った div要素で囲っただけ。

ただし、Markdownからテーブルを作るに辺り、 再生時に要素を入れるのが難しいので 表示する時にJavaScriptで入れるようにしました。

Markdown記入時にテーブルの上下に<div>を書いてしまうと 今度はMarkdownとして認識されなくなってしまうので直接書くことは出来ません。 (勿論、テーブルをHTMLで書いてしまうことは可能ですが。) 既に書いてある所も書き換えるのは大変なので安易にJavaScriptで挿入、ということで。

JavaScriptに以下の項目を加えます。 (utils.jsはこのブログで使ってるスタイルシートですが、 適時使ってるスタイルシートへ追加。)

1
2
3

$(function(){
  $('* + table').wrap('<div class="table-wrap"></div>');
});

* + tableとして取ってきてるのは、 コード部分等にもtableが含まれていて、 この様な部分には適用したくないからです。 コード部分では必ずそのすぐ外側がdivなどの要素で囲まれていて、 tableが隣の要素を持つことが無いのでこの方法だと避けられます。 逆にMarkdownから作られるテーブルは文中にあるので ページの一番最初にタイトルも無しに書かないかぎり必ず隣の要素があります。

HTMLは最終的に

1
2
3
4
5

<div class="table-wrap">
  <table>
  ...
  </table>
</div>

の様になります。

これでCSS(SCSS)で

1
2
3

.table-wrap {
  overflow: scroll;
}

と言った物を加えておいてあげればOK。

それから、テーブルを表示する際、 色付をCSSで行っていましたが、 その中で

1
2
3
4
5

* + table th, * + table td {
  border-style:solid;
  border-width:1.5px;
  border-color:#CCCCCC;
}

みたいな書き方をしてる所がありました。

• 

  Octopress Tips

* + tableとやってるのは上に書いたようにコード部分等を避けるためですが、 このままだと今度は通常のテーブルにも適用されなくなるので、

1
2
3
4
5

.table-wrap table th, .table-wrap table td {
  border-style:solid;
  border-width:1.5px;
  border-color:#CCCCCC;
}

の様に.table-wrapの下の、と言う様に変更しました。

これで、以下のように横に長い場合でも、 スクロールバーが付いて隠れている所も見えるようになります。