CSS لجعل الجدول عمود يستغرق الكثير من الغرفة ممكن ، وغيرها من cols قليلا

Question

أنا بحاجة إلى تخطيط html datatable مع CSS.

المحتوى الفعلي من الجدول يمكن أن تختلف ، ولكن هناك دائما من هو العمود الرئيسي و 2 أو أكثر من الأعمدة الأخرى.أود أن جعل العمود الرئيسي يستغرق الكثير من عرض ممكن ، بغض النظر عن محتوياته ، في حين أن الأعمدة الأخرى يستغرق أقل عرض ممكن.لا أستطيع تحديد الاعراض عن أي من الأعمدة لأن محتوياتها يمكن أن تتغير.

كيف يمكنني القيام بذلك باستخدام بسيط صحيح لغويا جدول html و css فقط ؟

على سبيل المثال:

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

Answer 1

أنا أبعد ما يكون عن كونه CSS الخبراء ولكن هذا يعمل بالنسبة لي (في أي FF, سفاري و كروم):

td.zero_width {
    width: 1%;
}

ثم في HTML الخاص بك:

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

Answer 2

على غرار Alexk هو الحل, ولكن ربما أسهل قليلا لتنفيذ اعتمادا على الوضع الخاص بك:

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

.importantColumn{
    width: 100%;
}

قد تحتاج أيضا إلى تطبيق white-space:nowrap إلى الخلايا إذا كنت ترغب في تجنب التفاف.

Answer 3

لقد كان النجاح مع width: 100%; كما يبدو أنه من دون وعاء div الذي يحتوي على عرض ثابت هذا لن تحصل على النتائج المرجوة.بدلا من ذلك استخدام شيء من هذا القبيل التالية ويبدو أن تعطيني أفضل النتائج.

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

بهذه الطريقة يمكن الحصول على أكبر إذا كان يحتاج إلى ذلك يبدو أن المتصفح سوف تعطي كل مساحة إضافية إلى أيهما عمود يتم تعيين هذا الطريق.ليس متأكدا مما إذا كان يعمل للجميع ولكن هل لي في كروم (لم يحاكم الآخرين)...يستحق رصاصة واحدة.