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

CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.

2014.08.18 ▼2021年最新版【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウトスマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。目次 2セルの場合の使用した例横に長い場合 overflow-x と inline-block を使用した例リスト風にした場合 list-it em を使用した例最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。『

homihoo 2015/06/30

リンク

作業効率がアップする！シンプルで見映えの良いテーブルCSS11種類 | Magicalog

テーブルのデザインを簡単に指定できる、テーブルのCSSテンプレートを作りました。無料配布するので、ご自由にご利用ください。全11種類のスタイルが入っています。色を変えるなど、お好みでカスタマイズしてお使いください。ダウンロードとデモページダウンロード（zip）デモページ使い方まずは、ファイルをダウンロード。適用させたいHTMLのhead部分で、ダウンロードした「tablestyle.css」を読み込みます。 <link rel="stylesheet" href="css/tablestyle.css" type="text/css"/> テーブルにクラス名を付けることで、スタイルが適用されます。横罫線のみ「table」（デフォルト）のスタイルを適用させたい場合 <table class="table-default">〜</table> ストライプ「table-str

homihoo 2015/02/09

table

リンク

https://infinityforest.net/home/archives/2206

homihoo 2014/07/24

高機能！

リンク

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

homihoo 2014/07/24

CSSで簡単にレイアウトを変えるものからjQueryでのカスタマイズまで

リンク

jQueryでクリックされたテーブルの行・セルの情報を取得する | Try Lifelog

HTMLテーブルのセルがクリックされた際、クリックされた行の情報をjQueryで得る方法。例として以下のテーブルを想定し、td要素をクリックすると起動されるイベントハンドラを定義する。  <table id=tblPlanSpot1> <tr> <td>A</td> <td id="a">AA</td> <td>AAA</td> </tr> <tr> <td>B</td> <td>BB</td> <td>BBB</td> </tr> </table> // JavaScript // イベントハンドラ $('#tblPlanSpot1 td').live('click',function(){ var $cur_td = $(this)[0]; // (1):セルのHTML表現 [0]をつける点に留意のこと。 var $cur_tr = $(this).pare

homihoo 2014/04/16

jQuery
table

リンク

高等科カリキュラム | 学習院女子中・高等科

homihoo 2013/07/16

リンク

テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌

テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね関連エントリ CSS3でクールな角丸テーブルを作る例シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ

homihoo 2013/05/22

リンク

tableコンテンツを作成・管理出来る高性能なWordPressプラグイン・TablePress - かちびと.net

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

homihoo 2013/05/16

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。実際に作ってみた - 下準備今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag

homihoo 2013/03/18

リンク

How to Create CSS3 Pricing Tables - Designmodo

Step 1 – HTML of CSS3 Pricing Tables We will create a table with the class “pricing-table”, this class will be the base to add our styling. Then we will divide our pricing tables in three parts: the first one, <thead>, will have the title of the plan and the respective price; the second one, <tbody>, will have the features of the plan (for example: bandwidth, disk space, etc.); and finally the thi