「visibility」プロパティの「collapse」設定時の注意点

@ハクト 2022-11-19 10:28:51に投稿

 

visible

div要素、表の行を表示

要素1
要素2
要素3
1 table table table
2 table table table
3 table table table
<span>要素1</span>
<span class="item">要素2</span>
<span>要素3</span>
<table>
    <tbody>
        <tr>
            <th>1</th>
            <td>table</td>
            <td>table</td>
            <td>table</td>
        </tr>
        <tr class="item">
            <th>2</th>
            <td>table</td>
            <td>table</td>
            <td>table</td>
        </tr>
        <tr>
            <th>3</th>
            <td>table</td>
            <td>table</td>
            <td>table</td>
        </tr>
    </tbody>
</table>

 

.item{
    background-color: #bbe7f9;
    visibility: visible;
}

hidden

div要素、表の行領域は確保し非表示

要素1
要素3
1 table table table
2 table table table
3 table table table
.item{
    visibility: hidden;
}

 

collapse

div要素の領域は確保、表の行は詰めて非表示

要素1
要素2
要素3
1 table table table
2 table table table
3 table table table
.item{
    visibility: collapse;
}

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter