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

【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 | 東京のホームページ制作 / WEB制作会社 BRISK

もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ横並びを縦並びにするテーブルレスポンシブ疑似要素で見出しを用意するテーブルレスポンシブcontent:attr() で見出しを表現するテーブルレスポンシブspanで見出しを表現するテーブルレスポンシブスクロールで表示させるテーブルレスポンシブ縦に積むテーブルレスポンシブPC SP ごくごく一般的なテーブルパターンですね。ソース上は上から順番に要素が並んでいるので、それらをb

sikusiku 2022/01/29

リンク

table-layout:fixed;を指定してもテーブルのwidthがうまく効かない場合の対処法

テーブル内のthやtdに対して、CSSで横幅を指定してもうまく効かない場合の対処法をご紹介いたします。複雑なテーブルを実装する時なんかは役立つと思います。よくある解決法「table-layout:fixed;」よく紹介されている対処法は、該当のテーブルに対して「table-layout:fixed;」を指定してあげる方法です。例えば、thだけを横幅100pxにしたい場合は、以下のように指定します。

sikusiku 2022/01/27

リンク

CSSだけで作るtableデザインテクニック

今回はCSSだけでデザインするtableのアイデアを2つ紹介したいと思います。画像を作ったテーブルも多く見ますが、画像を使わずにも、なかなかカッコいいテーブルができますので、ぜひ参考にしてみてください。ここでは、線と塗りだけで表現するシンプルなテーブルを作ってみます。 7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください！またテーブルはSEO的に良くないと考えている方がいましたら、tableタグはSEOに不利というデマコチラの記事もあわせて読んでみてください。元となるHTML <table summary="会社案内表"> <tr> <th class="t_top" width="180">会社名</th> <td class="t_top">株式会社○○○</td> </tr> <tr>

sikusiku 2015/11/29

リンク

CSSで作るシンプルなテーブル

.sample_01{ width: 100%; border-collapse: collapse; } .sample_01 th{ width: 25%; padding: 6px; text-align: left; vertical-align: top; color: #333; background-color: #eee; border: 1px solid #b9b9b9; } .sample_01 td{ padding: 6px; background-color: #fff; border: 1px solid #b9b9b9; } <table class="sample_01"> <tbody> <tr> <th>SAMPLE01</th> <th>デザイン</th> <th>枠線</th> <th>カラー</th> </tr> <tr> <td>有料</td>

sikusiku 2014/06/19

リンク

TABLE(テーブル)のデザイン・CSSの参考になるサイト・記事をまとめてみた[シンプルからかっこいい系]

ネットショップ運営[楽天・ECサイト]に関する情報便利ツール Webサービス CSS Javascript jQueryなど紹介していきます TABLEタグはネットショップの商品ページなどでは、スペック表、価格表としてよく使う機会があるのではないでしょうか？または、コンテンツのレイアウトに利用することも多いです。そんなTABLEタグですがHTMLでの記述の方法は覚えたんだけど、それだけでは綺麗でかっこいい見た目にするのって難しいですよね。単純に色を付けたり、線を引いたりするだけでも雰囲気は変わりますが、デザインの凝ったサイトにある表は、なんだか綺麗でかっこよくて何より見やすさが違うなと思うことも多いですし、必ずといっていいほどCSS(スタイルシート)で綺麗に装飾されています。 CSS(スタイルシート)での装飾と一言でいっても指定出来ることが非常に多くwebデザインをしている人でもすべて

sikusiku 2014/06/19

リンク

CSSでtable幅を設定するためのまとめ

CSSでtable幅を設定するためのまとめです。以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。１．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用例として、次のtable要素を利用します。

sikusiku 2014/01/29

リンク

CSSでテーブルタグ(table･th･tr･td)を扱いやすくする｜Webクリエイターネット

Category CSS HTML5でテーブルタグを扱う際、htmlに直接サイズ･余白･ボーダー･セルの背景色等を記述することは推奨されない(バリデータチェックで通らない)ためCSS側で指定します。その時もできるだけ｢html側でスタイルを複数適応するのは面倒...｣｢CSS側の記述もできる限り少なくしたい...｣って思います。そんな場合、これだったら簡単かも？といったCSSの記述を紹介します(モダンブラウザや古いバージョンのInternet Explorerでの表示にも対応していて結構便利です)。 Keyword：tableタグ用CSS,border-collapse CSSでテーブルタグ用のスタイルを作成するまずは、CSSでテーブルタグ用のスタイルを作成します。基本は以下の3つでOK(おおよそ、以下の3つで事足りると思います)。 CSS(パターン1) /* table幅の指定・