[B! table] riyokotterのブックマーク

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQueryプラグインをまとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちらまず最初は「Basic Table」。画面幅に応じて見出し要素を複製するかたちでテーブルを項目の並びを整えて収めてくれます。様々なレイアウトパターンが用意されていてテーブルが長くなる場合にはスクロール制御する機能もあり、いろい

riyokotter 2015/07/21

リンク

ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」:phpspot開発日誌

Mike Allison - jTableScroll ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」テーブルが長くなると、これは何の数値だったかと分からなくなることがよくありますが、ヘッダを固定できるので、そういうことがないようにできます。 thead,tfootで定義をしておけばあとはこのプラグインで初期化するだけです。関連エントリ高機能＆高速なテーブル実装jQueryプラグイン「WATable」テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」

riyokotter 2015/06/10

リンク

レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」:phpspot開発日誌

Basic Table Demo レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」。テーブルのレスポンシブ対応は厄介で色々な対応方法がありますが、なかなかスマートな対応ができるプラグイン。次のように一見普通のテーブル。ブラウザの幅を狭めると、次のように変形します。テーブルにmaxHeightを設定して、縦に大きくなり過ぎないような配慮も出来ます。スマホなのでは縦に長すぎると困ることもあるので、便利ですね関連エントリインライン編集できるテーブル実装用jQueryプラグイン「editable-table」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」複数条件で結果を絞

riyokotter 2014/10/10

リンク

ユーザとユーザを多対多で関連付けるモデルを共通化する - Hidden in Plain Sight

思いのほか前回のRailsプチ・デザインパターンの紹介に反応があったので、こういう小ネタも出していったほうがいいのかな、ということで第二弾。ソーシャル系アプリだと、ユーザとユーザを関連付ける多対多のモデルがたくさんでてきます。たとえば、一般的なところではフォローとかブロックとか足あととか。さらにデーティングサイトになると、ウィンクだったり、Secret admirer（こっそりlikeするけど両思いだったらおめでとうって通知がくるってやつ）だったり、いろいろなモデルがこのパターンにあてはまります。この場合、「AがBをフォローしている」「BがAをフォローしている」「AとBがお互いにフォローしている」という3つの状態があるわけですが、相互フォローの状態は「AがBをフォローし、かつBがAをフォローしている」と読み替えてSQLでも記述可能なので、以下ではシンプルに単方向のグラフで全てを扱うもの

riyokotter 2014/03/06

リンク

レスポンシブWebデザインでテーブルを使う時の小技

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-it emなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-it em; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

riyokotter 2012/11/27

リンク

https://themergency.com/footable/

riyokotter 2012/11/27

リンク

IE8から始めるテーブルレイアウトと IE10からのFlexible Box

IE8から始めるテーブルレイアウトと IE10からのFlexible Box 2012-11-08 テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display display: table; はCSS2.0からある仕様です。要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table; display: table;はIE8以降のtable要素に、デフォルトスタイルシートで定義されているものです。 IE8からサポートされているのでIE7以下を切り捨てれば、今からでも使うことができます。 display: table;以外にも多くの値が存在し、tableを形作る要素に振り分けられています。以下は、tableに振り分けられているCSS