CSS: table-cell

Mart 25, 2020 esakademi Yorum bırak 250

2 satır ve 3 sütun içeren bir tablo elde etmek için aşağıdakileri yapmanız gerekir:

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}

Aşağıdaki örnekte de görebileceğiniz gibi, 3. sütundaki div öğelerinin içeriği yoktur, ancak ilk 2 sütundaki metin tarafından ayarlanan otomatik yüksekliğe adapte oluyor.

<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>

CSS

CSS table-cell

esakademi

Bir cevap yazın Cevabı iptal et