タグ

関連タグで絞り込む (12)

タグの絞り込みを解除

tableに関するkuroaka1871のブックマーク (10)

  • 横スクロールさせたいtableの幅がうまくいかない…を解消しよう | バシャログ。

    花粉症が今年はクッソ辛いyanagimachiです。 「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。 さて、先日PCでtableが横スクロールする案件がありました。 とはいえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。 今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。 HTMLは以下のようなものとします。 <div class="mod-tbl"> <table> //中身 </table> </div><!-- /.mod-tbl --> いままでの実装 tableを囲む.mod-tblに スクロールのove

    横スクロールさせたいtableの幅がうまくいかない…を解消しよう | バシャログ。

  • [CSS]要素を上下中央揃えさせたい（IE7以下対応） - Qiita

    widthとheightは必ず指定する heightを指定しないと、高さが決まらないので中央揃いにならない。 widthは指定しなくてもいいが、text-align:center;などで文字を揃えたいときは、横幅の指定が必要になる。 稀にAndroidでバグる Androidで、display:table-cell;を指定している要素のwidthの値が認識されないことが稀にある。 原因などがいまいちわからなかったので、もし突き止めたら追記する。 display: table-cell;はマージンが効かなくなる display: table-cell;をあてると、marginが無視される。 なので、margin:0 auto;とかで要素を左右中央揃えにしてるとそれも無視されるので、そうしたい場合は<div>など別のブロック要素で余分に囲う必要がある。 IE7以下にはlayout-grid-l

    [CSS]要素を上下中央揃えさせたい（IE7以下対応） - Qiita

  • tableのデータを様々なフォーマットでエクスポート出来る様にするスクリプト・「HTML Table Export」

    HTML Table Exportはtableに書いたデータを様々なフォーマットでエクスポート出来るようにするスクリプトです。jQueryに依存します。対応フォーマットはPDFやJSON、PNG、XMLやCSVなど様々。ただ、それぞれのフォーマット毎にそれぞれのスクリプトを読み込む必要があります。ライセンスはMITとなります。 HTML Table Export

    tableのデータを様々なフォーマットでエクスポート出来る様にするスクリプト・「HTML Table Export」

  • 【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

    地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr

    【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

  • Sticky Table Headers & Columns - ヘッダー、見出しを固定表示するHTMLテーブルライブラリ MOONGIFT

    業務システムではテーブルがよく使われますが、大量のデータを表示するとカラムが見えなくなっていったりきたりする操作が発生します。それはユーザにとってストレスで改善要望を出されること請け合いな訳ですが、丁度自分たちのシステムにあったものを探すのは大変です。 さらに業務システムがスマートフォンからも使いたいなんて言われたらどうしたら良いでしょう。そこで紹介したいのがSticky Table Headers & Columns、横に長いテーブルにも対応したヘッダー追従テーブルライブラリです。 デモです。こういった感じのテーブルがあったとします。 スクロールしてもヘッダーがついてきて常に一番上に固定されます。 続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。 幅が広いテーブルでも右側にスクロールできるので問題ありません。 Sticky Ta

    Sticky Table Headers & Columns - ヘッダー、見出しを固定表示するHTMLテーブルライブラリ MOONGIFT

  • HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」:phpspot開発日誌

    Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン

  • tableをスマホ用に変形

    デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。 既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。 デモページ：幅480pxで表示 左：ヘッダ有り、右：ヘッダ無し 一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link rel="

  • すごく実用的！二人暮らしにちょうどいい、二人とみんなのためのテーブル - Table for Two

    二人用のデスクにも、六人掛けのテーブルとしても活用できる実用的なテーブル。 Daniel Liss氏によってデザインされたコンセプトです。 向かい合った形で作業スペースになり、引き出しにパソコンなどもしまえ、すぐにテーブルに早変わり。 折り畳めて広くなるテーブルは良くありますが、デスクとして機能するのは斬新です。 煩わしいケーブルも納められて、小物のポケットまでついている優れもの。 ちょっとした二人暮らしにはもってこいのデスクではないでしょうか。 片方だけがデスクにもできるので色々な生活シーンに対応できそうですね。 すごく実用的でステキ！ Table for Two. - By: Daniel Liss from Daniel on Vimeo. via: Table for Two by Daniel Liss » Yanko Design

    すごく実用的！二人暮らしにちょうどいい、二人とみんなのためのテーブル - Table for Two

  • tableコンテンツを作成・管理出来る高性能なWordPressプラグイン・TablePress

    テーブルを手軽に作成、管理する為のWordPressプラグイン・TablePressのご紹介です。今まで見てきた中では一番機能性が高そう。良さそうなので後で日本語にして利用しようと思います。 面倒臭いテーブルを作れるようにするプラグイン。クライアントさんは作れないのでこういったプラグインを使ってもらうと良いかも。機会があれば提案してみたい所です。 管理画面でテーブルを作成、ショートコードで表示する、というもの。管理も楽そうです。CSVのインポート/エクスポートにも対応してるみたい。 テーブルは管理画面で列や行を追加、中身を書き込んでいく形となります。Advanced Editorを使えばセル内でWYSIWYGを利用できます。 セル同士の結合も可能なのでそこそこ複雑なテーブルも作れそうです。 一部有料ですが、レスポンシブWebデザイン対応やセル内でのPHPコード実行用のエクステンション等もあ

    tableコンテンツを作成・管理出来る高性能なWordPressプラグイン・TablePress

  • tableの幅をドラッグでリサイズ出来るようにするスクリプト・jQuery Resizable Column

    table要素の幅をドラッグでリサイズ出来る様にする、というスクリプトのご紹介です。用途は少なそうですけど、テーブルの内容次第では便利かも。 テーブル内のセルの幅をドラッグで変更できる、というものです。 border部分にマウス乗せるとポインタが変わるのドラッグで幅を変更します。 $("table").resizableColumns({ store: store });本体とプラグイン等を読み込んでセレクタを指定します。 変更した幅はローカルストレージに保存されるようです。 jQuery Resizable Column

    tableの幅をドラッグでリサイズ出来るようにするスクリプト・jQuery Resizable Column
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.