تحديد عرض العمود النسبي مع <عرض عمود = "س *" />

Question

وأنا أحاول تحديد عرض العمود النسبي مع <col width="x*" />:

<table width="600px">
    <col width="1*" />
    <col width="2*" />
    <col width="3*" />
    <tbody>
        <tr>
            <td style="border: 1px solid black;">AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA
            </td>
            <td style="border: 1px solid black;">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
            </td>
            <td style="border: 1px solid black;">CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC
            </td>
        </tr>
    </tbody>
</table>

وعلى الرغم من تحديد نسب في العلامة <col>، عرض الأعمدة متساوية. ماذا أفعل الخطأ؟

Answer 1

ويمكن استخدام 17٪، 34٪ و 49٪. ل1: 2: 3

Answer 2

وحاولت الحصول على هذا العمل في جميع المتصفحات الرئيسية كنها فشلت أيضا. جوجل إحضار القليل جدا باستثناء المواصفات الرسمية.

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

Answer 3

ويمكنك استخدام colgroup.

WSSchools

<اقتباس فقرة>   

وتحدد العلامة مجموعة من عمود واحد أو أكثر في الجدول   للتنسيق.

     

والعلامة هي مفيدة لتطبيق أنماط إلى أعمدة بأكملها،   بدلا من تكرار أنماط لكل خلية، لكل صف.

table {
   width: 100%;
}
td {
   text-align: center;
}

    <table>
        <colgroup>
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 70%;">
        </colgroup>
        <thead>
            <tr>
                <th class="col_3">On stop credit</th>
                <th class="col_3">Rating</th>
                <th class="col_3">Customer Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Value</td>
                <td>Value</td>
                <td>Long text value</td>
            </tr>
        </tbody>
    </table>