2011-06-07 29 views
10

CSS kullanarak bir tabloyu ikiye bölmek ve iki parçayı yan yana görüntülemek için var mıdır.Tabloyu ikiye bölme

| row1 | row1 | row1 | 
| row2 | row2 | row2 | 
| row3 | row3 | row3 | 
| row4 | row4 | row4 | 
| row5 | row5 | row5 | 

Ve bu hale:

Örneğin, bunu al

| row1 | row1 | row1 | | row4 | row4 | row4 | 
| row2 | row2 | row2 | | row5 | row5 | row5 | 
| row3 | row3 | row3 | 

I (özel sınıfı ile "kırılma" satırını işaretleme gibi) HTML işaretlemesi değiştirebilir, ama CSS ile tablonun bölünüp bölünmeyeceğine karar verebilmeli.

2 tabloyu kullanabileceğimi ve display:inline-table numaralı telefonu kullanabileceğimi biliyorum, ancak tutarlı bir sütun genişliğine gereksinim duyduğumdan dolayı tek bir tablo kullanmalıyım (tablonun otomatik düzeni olması gerekir).

+3

ben tür bir tablonun "tanımı" karşı olduğunu düşünüyorum deneyebilirsiniz modern tarayıcılarda

içinde çalışması gerekir. Eğer sıvı bir element olsaydı, bu bir tablo olmazdı, aksine, eğer bir tablo ise sıvı değil. Her ne kadar garip bir konumlandırma ile bu şeyi kesebiliyor olsanız da ... – davin

+0

Bu kadar düşündüm, ama HTML/CSS'de uzman olmadığım için sormaya karar verdim ... :( –

cevap

4

Çok sütunu kullanabilirsiniz, ancak bu bir CSS3 özelliğidir. örneğin:

-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
column-count: 2; 
column-gap: 20px; 

Bu da bu yöntemi

http://www.csscripting.com/css-multi-column/

+0

İşe yarayacak gibi değil. IE ve sadece Chrome'daki '-webkit' varyasyonu ile Prens XML kullanacağımdan bu bir problem olmayacak.Ayrıca hücrelerin sütunlar arasında kırılabileceğini de fark ettim, bundan kaçınmanın bir yolu var mı? –

+0

Bildiğim kadarıyla, bir yolu yok. – eagle12

+0

, IE-sütun-sayısı ile IE 10'dan itibaren çalışıyor ... Hücre kırılması için ... bu zor ve tutarsız, ya da en azından henüz bir Bunu yapmak için tutarlı bir yol: 'display: inline-block' öğesini ayarlayarak veya içeriğini bu stille div olarak sarmalayarak bireysel bir hücrenin bozulmamasını sağlayabilirsiniz, ancak tüm satır bu şekilde işbirliği yapmayacaktır. Bazı içerikler iyi çalışır , diğer içerik ikinci sütun üzerinde bir girinti ile sık sık, ilginç olacaktır. olumn-break 'özellikleri, ama destek ben henüz bir tablodaki tüm bir satır ile iyi çalışmak için onları almak için sivilceli. – Randolpho