كيفية إنشاء جدول بعرض 100٪ ولكن لديك تخطيط عمود ديناميكي؟

أرغب في إنشاء جدول تم احتوائه بالكامل ضمن العنصر الرئيسي الخاص به ، ولكن عرض الأعمدة التي تم حلها استنادًا إلى محتواها. إذا كان طول الجدول المطلوب أطول من مربع المحتوى الخاص بالعنصر الرئيسي ، فسيظهر شريط تمرير أفقي أسفل الجدول. حاولت التلاعب بخصائص تخطيط الجدول و overflow ، لكن دون جدوى.

كود HTML:

<div>
<table>
    <tr>
        <td>fixed_length_text</td>
        <td>variable_length_text</td>
        <td>image</td>
        <td>double_float_double_float</td>
    </tr>
    <tr>
        <td>fixed_length_text</td>
        <td>variable_length_text_variable_length_text</td>
        <td>image</td>
        <td>double_float_double_float</td>
    </tr>
</table>
</div>

رمز CSS:

div {
    padding: 10px;
    background: grey;
    width: 400px;
}

table {
    border-collapse: separate;
    border-spacing: 2px;
    background: white;
}

tr {
    background: green;
}

This is what I have tried on jsFiddle. Is there anyway to combine the best of both worlds?

0

2 إجابة

جرب overflow-x: auto؛ . ينطبق هذا على المحور الأفقي للعنصر فقط.

0
وأضاف

إذا كنت أفهمك الحق من:

http://jsfiddle.net/nfg34/1/

0
وأضاف
لقد ربطت نفس jsFiddle بالشخص الموجود في السؤال.
وأضاف المؤلف thirtydot, مصدر
وأضاف المؤلف Holger D. Schauf, مصدر