Sadece içeriğine uygun bir masa hücresi küçültme genişliği nasıl yapılır?

Question

I Tablo 100% genişliğe sahip istiyoruz, ancak ondan bir sütun gibi serbest bir genişliğe sahip olmalıdır:

| A | B | C                 | 

böylece, A ve B sütun genişliği içerikleri genişliğine uygun olmalıdır, ancak Tablo sonuna kadar C'nin genişliği devam etmelidir.

Tamam A ve B'nin genişliğini piksel cinsinden belirtebilirim, ancak sorun şu ki bu sütunların içeriğinin genişliği sabit değil, bu yüzden sabit bir genişlik ayarlı olsaydım, içerik mükemmel bir şekilde eşleşmez :(

Not: Gerçek tablo öğelerini kullanmıyorum, ancak bir div içine sarılmış bir DL listesi kullanıyorum. Div ekrana sahip: table, dl display: table-row ve dt/dd display: table-cell sana anlasalardı ...

Answer 1

, tablo halindeki verileri var ama div öğelerini kullanarak tarayıcıda sunmak istiyorum (ekranlı AFAIK tablo ve div'leri: tablo çoğunlukla aynı şekilde davranır)

.

(burada bir çalışma jsfiddle geçerli: http://jsfiddle.net/roimergarcia/CWKRA/)

işaretleme:

<div class='theTable'> 
    <div class='theRow'> 
     <div class='theCell' >first</div> 
     <div class='theCell' >test</div> 
     <div class='theCell bigCell'>this is long</div> 
    </div> 
    <div class='theRow'> 
     <div class='theCell'>2nd</div> 
     <div class='theCell'>more test</div> 
     <div class='theCell'>it is still long</div> 
    </div> 
</div>​ 

Ve CSS:

.theTable{ 
    display:table; 
    width:95%; /* or whatever width for your table*/ 
} 
.theRow{display:table-row} 
.theCell{ 
    display:table-cell; 
    padding: 0px 2px; /* just some padding, if needed*/ 
    white-space: pre; /* this will avoid line breaks*/ 
} 
.bigCell{ 
    width:100%; /* this will shrink other cells */ 
}​ 

üzücü kısmı bu bir yıllık yapamadı olduğu önce, gerçekten ihtiyacım olduğunda -_-!