كيفية إخفاء صفوف الجدول دون تغيير حجم العرض الكلي?

Question

هل هناك طريقة لإخفاء صفوف الجدول دون التأثير على الجدول العام العرض ؟ لدي بعض جافا سكريبت أن إظهار/إخفاء بعض صفوف الجدول ، ولكن عندما يتم تعيين الصفوف إلى display: none;, الجدول مع ينكمش لتناسب محتويات مرئية الصفوف.

Answer 1

إذا كنت تبحث للحفاظ على العرض الكلي من الجدول, يمكنك التحقق من ذلك قبل أن يختبئ صف واحد, و صراحة عرض نمط الملكية إلى هذه القيمة:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

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

 table {
  table-layout: fixed;
 }

Answer 2

للإشارة ، levik الحل يعمل تماما.في حالتي, باستخدام مسج, الحل بدا شيء من هذا القبيل:

$('#tableId').width($('#tableId').width());

Answer 3

CSS visibility: collapse تم تصميمه تماما عن ذلك.

tbody.collapsed > tr {
    visibility: collapse;
}

بعد إضافة هذا CSS يمكن أن تؤدي إلى الرؤية من شبيبة مع:

tbody.classList.toggle('collapsed');

Answer 4

في CSS ، table-layout: fixed; على الجدول الخاص بك يرشد المتصفح لتكريم الأحجام التي قمت بتحديدها على مرتفعات الاعراض.عموما هذا يقمع لصناعة السيارات في تغيير حجم المتصفح إلا إذا كنت لم يعطي أي تلميحات عن المفضل أحجام الصفوف والأعمدة.

Answer 5

يمكنك أن تفعل ذلك باستخدام نقية HTML

<table border="1">
<colgroup>
    <col width="150px" />
    <col width="10px"  />
    <col width="220px" />
</colgroup>
<tr>
    <td valign="top">1</td>
    <td> </td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td> </td>
    <td>4</td>
</tr>
</table>