2019年10月18日(金)
なるべく少ないコードでレスポンシブなtable
Result
See the Pen Responsive Tables #2.5: Flexbox by kachibito
(@kachibito) on CodePen.
※内容は最新の方法的なものではなく以前からよく使われている方法です個人的に毎回悩むtableのRWD対応ですが、やはり少ないコードで実装できるのが理想だと思うのでいろいろ記事を参考にしながら再考してみました
なるべく少ないコードでレスポンシブなtable、というタイトルではありますが、そもそもtableの内容によって最適解は異なるので答えを出すのは難しそうですね
css
table { border-collapse: collapse; text-align: left; width: 100%; } table tr { border-bottom: 1px solid } table th, table td { padding: 10px 20px; } table td:before {/*モバイル用の見出し。PC向けでは非表示にする*/ background: #eee; co...
0
0
5
23author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『なるべく少ないコードでレスポンシブなtable』についてまとめています。
この記事は特にレスポンシブ・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
