Birkaç gündür programda kullandığımız Audit dosyasının görünüşüyle ilgili sorunlarla uğraşıyordum. Audit dosyası verilei barındıran bir XML dosyası. Bu dosya bir XSL dosyası yardımıyla HTML sayfasına dönüştürülüyor. Test bölümü bu HTML çıktısında bazı satırların sayfaya sığmadığını bildirdi ve böylece bu maceramın başlangıcına gelmiş oldum. Çıktıda bazı satırlar sayfaya sığmadığı gibi en sağdaki sütun hep bir sonraki satırdan başlıyordu:
Aradığım çözüm ise son sütunun diğer sütunlarla aynı hizada başlaması ve sayfanın sağından taşan yazının da bir alt satırdan ama sütunun başladığı yerden devam etmesiydi. Ayrıca son sütun birden fazla satıra yayıldığında ise sütunları kapsayan bütün div elementi de aynı yüksekliğe sahip olmalı ki bu kayıt bir sonraki kaydın görüntüsünü bozmamalı. Sonunda şu sayfanın da yardımıyla aradığım sonuca ulaştım:
[sourcecode]
.table-layout {
display: table; width:100%;
}
.row-layout {
display: table-row; width:100%;
}
.dateTime {
white-space: nowrap;
width: 40%;
display: table-cell;
}
.source {
white-space: nowrap;
width: 20%;
display: table-cell;
}
.audit {
width: 50%;
display: table-cell;
}
<div class="table-layout">
<div class="row-layout">
<div class="dateTime">
31-03-2016 13:14:16
</div>
<div class="source">
Recep
</div>
<div class="audit">
Sistem ayarlarıyla öyle oynandı ki sistem artık saçmalamaya başladı
</div>
</div>
<div class="row-layout">
<div class="dateTime">
31-03-2016 13:14:15
</div>
<div class="source">
Recep
</div>
<div class="audit">
Sistem ayarlarıyla oynandı
</div>
</div>
</div>
[/sourcecode]