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

WebKitに対応したブラウザでtableのborderが正しく表示されない。 | haikararou

WebKitに対応したブラウザでtableのborderが正しく表示されないことがある。実線が表示されなかったり、破線が実線で表示されたり等。。。ブラウザの表示倍率を変更したり、文字サイズを変更すると正常な表示になったりしますが、対策にはならない。またエラーには再現性があり、表示がおかしい箇所は常におかしい。正しい表示誤った表示どうやらWebKitのバクで「border-collapse: collapse;」にエラー出ているらしい。対応方法は「border-collapse: collapse;」をやめて、「border-spacing: 0;」とする。 IE7ではセル間が開いてしまうのでtableに「 cellspacing=”0″」を追記する。

miruto 2013/08/05

リンク

JavaScriptだけで表＜table＞を並び替え！ (1/2)

HTMLのtable（表組み）を使って、Webサイトにさまざまなデータを表示する機会は多くあります。たとえば、サークルのWebサイトを作った時に、メンバーの名前や年齢などをまとめたリストを公開するとしましょう。このとき、Webサイトを訪れたユーザーが、自分の見たい順番に行を並べ替えられたら便利なのに……といったことはありませんか？そこで試してみたいのが、表の並び替え（ソート）を実現するJavaScriptライブラリです。並び替え機能を持つJavaScriptライブラリは数多くありますが、その中から高機能で使いやすい「DataTables」を紹介しましょう。DataTablesを使えば、サーバーサイド技術の力を借りずに、HTMLとJavaScriptだけでリッチな表を作れます。並び替えを簡単に実現する「DataTables」 DataTablesは、並び替えをはじめとして、table要素

miruto 2012/11/13

リンク

レスポンシブ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にはメディアクエリを読ませないよ

miruto 2012/11/03

リンク

MdN Design｜総合情報サイト

汎用性の高いシンプルなボックス型のテーブル【1-1】。見出しである<th> 要素と、その値である<td>要素が判別しやすく、特別な工夫がなくてもわかりやすく表現できるため制作する側も使いやすい。<th> 要素と<td>要素で背景色や文字色を明確に分けるとわかりやすい。ここでは<th>の背景色をオレンジ、文字色を白とした【1-2】【1-3】。【1-1】シンプルなボックス型のテーブル。特別な工夫がなくてもわかりやすい【1-2】html は基本の構造。見出しのセルは<th>を使う【1-3】thとtdでは別々の背景色と文字色にする

miruto 2012/10/29

table
CSS

リンク

[CSS]サイズが分からない要素を真ん中に配置するテクニック

width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。要素のサイズが分かっている場合要素のサイズが分からない場合まとめと対応ブラウザ要素のサイズが分かっている場合「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t

miruto 2011/11/03

table
CSS

リンク

テーブルを見やすく、使いやすくするためのアルティメットガイド

ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクションはじめにテーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単