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

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セルでよく作られてる、会社概要やフォームなどで使えるかと思います。『

gotack 2018/07/31

リンク

HTML要素を動的に追加・削除する

要素を追加する基本的なながれとしては以下のようになります。 1) 要素を追加したいオブジェクト（親オブジェクト）への参照を取得。 ID名で取得（確実）親オブジェクト = document.getElementByID("ID名"); タグ名（TABLEとかTDとか）で取得。numは０から始まる順番 document.getElementsByTagName("タグ名").it em(num); 2) 追加したい要素を生成。オブジェクト名 = document.createElement("タグ名"); 3)生成した要素の属性をセットオブジェクト名.setAtrribute("属性","値"); 4)生成した要素を親オブジェクトへ追加親オブジェクト.appendChild(オブジェクト名); ボタンをクリックした際にJavaScriptを実行するような属性を付けたい場合がありますが、

gotack 2015/04/09

table

リンク

CSSだけで作るtableデザインテクニックVer.02(おまけ付き)

今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML　テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top

gotack 2012/06/24

リンク

可愛い枠　:..:おしゃれな枠が簡単に出来るよ！:..:

<CENTER>  <TABLE bgcolor="#ffe5dd" cellspacing="3" bordercolor="#ffdddd" border="1"> <TBODY> <TR> <TD> <TABLE bgcolor="#ffffff"> <TBODY> <TR> <TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src="●●.gif"に画像を指定画像の大きさに合わせて、width="10" height="10" も変更--

gotack 2011/06/27

テーブルの枠線をおしゃれに

html
table

リンク

TableをCSSでデザインするいろんなパターンのまとめ

gotack 2009/12/31

table
css

リンク

CSSでTableをデザインするサンプル集 | CSS Lecture

gotack 2009/12/31

table
css

リンク

エクセルデータからHTML Tableタグの表を作成してくれる「Tableizer」

↓画像のようにエクセルデータをコピペするだけでOKです。バイナリデータのタブ区切りで認識しているみたいです。生成されたタグ厳密に言うと、HTMLタグとCSSが生成されます。 CSSは <head> </head> 間か、外部ファイルに移しても良いかもしれませんね。 <style type="text/css"> table.tableizer-table {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} .tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;} .tableizer-firstrow td {background-color: #FDA500; color: #

gotack 2008/12/15

リンク

CSSでクールなテーブルを作成するサンプル:phpspot開発日誌

A CSS styled table | Veerle's blog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。次のようなテーブルを作成するサンプルが公開されています。サンプル１（解説記事）サンプル２（解説記事）テーブルもここまでカッコいいものが作れるんですね。是非テーブルスタイル時の参考にしたいサンプルです。