HintsレスポンシブTableStyleアドベントカレンダーUXPublished:2017.12.01モロデザイナーフリーランスなWebの人。最近はメダカと錦鯉と仮想通貨が好きです。好きなコーギーはペンブロークです。2017、1日目の記事として書いております。モロ(@moro_is)です。何かリッチな感じがする!」と大変感銘を受けたことがあります。Table期待に違わぬ見事な出来なのですが、まだ改善の余地は残されているように思えます。このご時世、そうdivに目くじらを立てることもないとは思うのですが、逆にこのご時世だからこその問題があります。マークダウン記法です。GithubでもQiitaでもTrelloでもesaでも、さらにこのブログでも今や見渡す限りがマークダウン記法です。あの厄介なTableがほぼ|だけで書けてしまう、それがマークダウン記法です。マークダウン記法では(通常)Tableの外側にdivを配置できません。Tableに一手間改良を加えてみたのがこちら。外側のdivをなくして、tbodyにドロップシャドウを適応tbody内部を包括する要素がないためtrの:first-childとlast-childを利用してtbodyのドロップシャドウを隠すスクロールからtheadを分離のみです。queryのmax-widthがやたら広いのは取り急ぎPCからでもスマホの表示を見られるようにです。図としてはざっくり下記のようになっています。わかりにくいかも知れない。JS(Styled-components)」に触れさせていただく予定でおります。吉祥寺のプチ情報を発信するWebマガジン。ドークツドークツホームお知らせサービス制作実績ブログ歩く吉祥寺お問い合わせ。