CSS bir tablo sütun mümkün olduğunca fazla oda kadar almak ve diğer cols kadar az

Question

CSS ile bir html datatable düzenlemek gerekir.

Tablonun gerçek içeriği farklılık gösterebilir, ancak her zaman bir ana sütun ve 2 veya daha fazla sütun vardır. Diğer sütunlar mümkün olduğunca az genişlik alırken, ana sütunun içeriğine bakılmaksızın mümkün olduğunca MUCH genişliğini almasını istiyorum. İçeriği değişebileceğinden, herhangi bir sütun için kesin genişlik belirtemiyorum.

Bunu basit bir semantik olarak geçerli html tablosu ve yalnızca css kullanarak nasıl yapabilirim?

Örneğin

: Bir CSS uzmanı olmaktan çok uzağım

 
| Main column       | Col 2 | Column 3 | 
<------------------ fixed width in px -------------------> 
<------- as wide as possible ---------> 
Thin as possible depending on contents: <-----> <--------> 

Answer 1

ama bu (IE, FF, Safari ve Chrome) benim için çalışıyor: HTML'nize Sonra

td.zero_width { 
    width: 1%; 
} 

:

<td class="zero_width">...</td> 

Answer 2

Alexk çözümüne benzer, ancak durumunuza bağlı uygulamak için muhtemelen biraz daha kolay:

<table> 
    <tr> 
     <td>foo</td> 
     <td class="importantColumn">bar</td> 
     <td>woo</td> 
     <td>pah</td> 
    </tr> 
</table> 

.importantColumn{ 
    width: 100%; 
} 

Sarılmayı önlemek istiyorsanız, white-space:nowrap hücrelerine de uygulamak isteyebilirsiniz.

Answer 3

width: 100%; ile başarı elde edemedim, çünkü sabit bir genişliğe sahip bir kapsayıcı div olmadan bu, istenen sonuçları almayacaktır. Bunun yerine aşağıdaki gibi bir şey kullanırım ve bana en iyi sonuçları verir gibi görünüyor.

.column-fill { min-width: 325px; } 

Bu şekilde o ihtiyacı durumunda daha büyük alabilirsiniz ve bunun hangisi sütun bu şekilde ayarlanır için tarayıcı tüm fazladan yer vermek olacak gibi görünüyor. Herkes için çalışıp çalışmadığından emin değilim, ama benim için kromda (başkalarını denemedim) ... bir şeye değdi mi?