Jak ustawić szerokość zmniejszającą komórki tabeli tak, aby pasowała tylko do jej zawartości?

Question

Chcę tabela mieć 100% szerokości, ale tylko jedna kolumna z niego powinny mieć wolną szerokość, jak:

| A | B | C                 | 

więc szerokość kolumn A i B powinna odpowiadać szerokości ich treści, ale szerokość C powinna iść do momentu, aż stół się skończy.

Ok Mogę określić szerokość A i B w pikselach, ale problem polega na tym, że szerokość zawartości tych kolumn nie jest stała, więc jeśli ustawię stałą szerokość, nie będzie idealnie pasować do zawartości :(

PS: Nie używam rzeczywistych elementów tabeli, ale lista DL owinięta w div. Element div wyświetla: tabelę, dl wyświetla: wiersz tabeli i ekran dt/dd: tabela-komórka ...

Answer 1

Jeśli ja zrozumiałem, masz dane tabelaryczne, ale chcesz przedstawić go w przeglądarce przy użyciu div elementy (tabele AFAIK i div z wyświetlaczem: stół zachowuje w większości takie same)

.

(tutaj jest jsfiddle robocze: http://jsfiddle.net/roimergarcia/CWKRA/)

Znaczniki:

<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>​ 

I 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 */ 
}​ 

Smutne jest to, że nie mógł to zrobić jeden rok temu, kiedy naprawdę tego potrzebowałem -_-!