More than 5 years have passed since last update.

3カラムで、左右は固定で、真ん中が可変であるテーブルレイアウト(tableタグを使用せず、divタグで実装する場合)

HTML
CSS

Posted at 2018-02-22

以下のようにdisplay:tableとdisplay:table-cellを使用することで、実現できます。

<html>
<body>
<div style="display:table; width:100%;">
    <div style="display:table-cell; width:100px; background-color: blue">あいうえお</div>
    <div style="display:table-cell; background-color: yellow">かきくけこさしすせそ</div>
    <div style="display:table-cell; width:100px; background-color: green">たちつてと</div>
</div>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up