横スクロールさせたいtableの幅がうまくいかない…を解消しよう | バシャログ。
花粉症が今年はクッソ辛いyanagimachiです。 「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。 さて、先日PCでtableが横スクロールする案件がありました。 とはいえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。 今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。 HTMLは以下のようなものとします。 <div class="mod-tbl"> <table> //中身 </table> </div><!-- /.mod-tbl --> いままでの実装 tableを囲む.mod-tblに スクロールのove
[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](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b63b6cb42819079664602aef02c098405138ef5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-1.2.2%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D380%2526txt%253D%25255BCSS%25255D%2525E8%2525A6%252581%2525E7%2525B4%2525A0%2525E3%252582%252592%2525E4%2525B8%25258A%2525E4%2525B8%25258B%2525E4%2525B8%2525AD%2525E5%2525A4%2525AE%2525E6%25258F%252583%2525E3%252581%252588%2525E3%252581%252595%2525E3%252581%25259B%2525E3%252581%25259F%2525E3%252581%252584%2525EF%2525BC%252588IE7%2525E4%2525BB%2525A5%2525E4%2525B8%25258B%2525E5%2525AF%2525BE%2525E5%2525BF%25259C%2525EF%2525BC%252589%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D5e26dc284ded7d6027308165f4bbdcf3%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D500%2526txt%253D%252540devdyaya%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253D91bbb627e70d684302b0e028dd66edcd%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3D217d6ee10629ddad94d9d0f73a8a9076)
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
Sticky Table Headers & Columns - ヘッダー、見出しを固定表示するHTMLテーブルライブラリ MOONGIFT
業務システムではテーブルがよく使われますが、大量のデータを表示するとカラムが見えなくなっていったりきたりする操作が発生します。それはユーザにとってストレスで改善要望を出されること請け合いな訳ですが、丁度自分たちのシステムにあったものを探すのは大変です。 さらに業務システムがスマートフォンからも使いたいなんて言われたらどうしたら良いでしょう。そこで紹介したいのがSticky Table Headers & Columns、横に長いテーブルにも対応したヘッダー追従テーブルライブラリです。 デモです。こういった感じのテーブルがあったとします。 スクロールしてもヘッダーがついてきて常に一番上に固定されます。 続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。 幅が広いテーブルでも右側にスクロールできるので問題ありません。 Sticky Ta
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コンテンツを作成・管理出来る高性能なWordPressプラグイン・TablePress - かちびと.net
テーブルを手軽に作成、管理する為のWordPressプラグイン・TablePressのご紹介です。今まで見てきた中では一番機能性が高そう。良さそうなので後で日本語にして利用しようと思います。 面倒臭いテーブルを作れるようにするプラグイン。クライアントさんは作れないのでこういったプラグインを使ってもらうと良いかも。機会があれば提案してみたい所です。 管理画面でテーブルを作成、ショートコードで表示する、というもの。管理も楽そうです。CSVのインポート/エクスポートにも対応してるみたい。 テーブルは管理画面で列や行を追加、中身を書き込んでいく形となります。Advanced Editorを使えばセル内でWYSIWYGを利用できます。 セル同士の結合も可能なのでそこそこ複雑なテーブルも作れそうです。 一部有料ですが、レスポンシブWebデザイン対応やセル内でのPHPコード実行用のエクステンション等もあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tableのデータを様々なフォーマットでエクスポート出来る様にするスクリプト・「HTML Table Export」
tableの幅をドラッグでリサイズ出来るようにするスクリプト・jQuery Resizable Column - かちびと.net