عرض ديناميكية من الجدول في العمود

Question

لدي طاولة واحدة مما عرض البيانات من المحتوى الديناميكي ، أنا تريد أن تجعل من الجدول العرض 100% عندما يكون هناك 6 cols.و الجدول عرض السيارات إذا كان أقل من 5 cols.

حاولت مع CSS ولكن عندما يكون هناك اثنين فقط من العواميد ، توسيع اثنين cols إلى العرض الكامل حين يكون الجدول 100% العرض و يبدو محرجا.

هل هناك أي جافا سكريبت, مسج النصي المتاحة للحصول على هذه النتيجة ؟

Answer 1

باستخدام مسج وضمان اخترت الصف الأول في الجدول الجسم في حالة thead لها تخطيط مختلف.

function setTableWidth(tableId) {

    var $tbl = $('#'+tableId);
    var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
    $tbl.width(newWidth)

 }

Answer 2

اعتمادا على كيفية كنت تحميل المحتوى الديناميكي ، قد تكون هناك طريقة أسهل, ولكن هذه الوظيفة يجب أن تفعل ما عليك:

function setTableWidth(tableId) {
    myTable = document.getElementById('tableId');
    if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
        myTable.style.width = '100%';
    else
        myTable.style.width = 'auto';
 }

ملاحظة على الرغم من أنه لن يعمل إذا كان أي من الخلايا في الصف الأول يكون colspan.انها ببساطة عد عدد الأعمدة في الصف الأول ووضع العرض بناء على ذلك.