CSS：角丸のテーブルを作成する方法 - NxWorld
テーブルをCSSを使って角丸にする方法です。 以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。 角丸テーブルの完成イメージ 以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。 実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。 あるプロパティが指定されていると角丸にならない CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されて
レスポンシブなのを作ってたら、firefoxでtable内の画像が圧迫した件
何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がし何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がしてあり、tdにはwidth設定がない状態（つまりtd側が可変） にも関わらずfirefoxのみ出来てない！ あ、OSはmacですのん。だからIEはみてないｗ←ある程度出来てからチェックするつも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4/4 tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About![4/4 tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/299995f81ab1b48dd61b1a07280867044b3e11a3/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F6%2F3%2F7%2F2%2Ftopimg_original.png)
