CSS table親要素と同じ高さになるサンプル

2022年10月27日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
div要素のクラス名　table {
height: 100%;
}
親にauto以外のheightが指定されているときはheightの%指定が効きます。
「height:100%」を指定すると親要素と同じ高さになります。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/*div要素のクラス*/
.cft {
    height: 200px;
    border: 1px solid #999;
    background: skyblue;
}
/* tableにheight:100%を指定*/
.cft table{
    height: 100%;
}
</style>
</head>
<body>
<div class="cft">
    <table border="1">
        <tr>
            <td>AA1-1</td>
            <td>AA1-2</td>
            <td>AA1-3</td>
            <td>AA1-4</td>
        </tr>
        <tr>
            <td>BB2-1</td>
            <td>BB2-2</td>
            <td>BB2-3</td>
            <td>BB2-4</td>
        </tr>
    </table>
</div>

</body>
</html>

CSS

Posted by arkgame