الجداول مليئة بـ CSS في Firefox
-
22-07-2019 - |
سؤال
أواجه مشكلة في جعل طاولتي تتصرف.يستمر المحتوى في التدفق ومحاولاتي لتقييده لا تؤدي إلى التأثير المطلوب.
هذه هي علامتي:
<div class="repeatingdiv">
<div class="hastitle">Some title</div>
<div class="hastable">
<table>
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
ثم لدي بعض الاسلوب.ال td's
تفيض، ولكن لم يكن لدي أي حظ في تحديدها overflow to hidden/auto
.لقد كان حظي أفضل في ضبط الفائض في hastable
الفئة التي تحتوي على الجدول.ولكن ما زلت أواجه صعوبة في الحصول على ثعلب النار لاحترام width
التوزيع للأعمدة الثلاثة: 30%, 35%, 35%
.لقد حاولت أيضًا الإعداد min-width
, ، ولكن لا حظ حتى الآن.لدي العديد من هذه الجداول في الصفحة، وكل منها يأخذ عرضه الخاص.هل من مساعدة في فوضى الطاولة هذه؟
.repeatingdiv { }
.hastitle { margin:0 10px; padding:3px 3px 1px 6px; }
.hastable { overflow:hidden;
text-overflow: ellipsis;
margin:10px;
padding:10px;
}
table { }
table tbody { width: 100%; }
tr { width: 100%; }
td.col1 { width:30%; min-width:30%; }
td.col2 { width:35%; min-width:35%; }
td.col3 { width:35%; min-width:35%; }
المحلول
من المعروف أن الجداول صعبة التصميم.حاول إضافة هذا إلى CSS الخاص بك:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
أقترح أيضًا استخدام HTML الفعلي COL
/ COLGROUP
عناصر لتحديد أعمدتك، على النحو التالي:
<table>
<colgroup class="col1" />
<colgroup class="col2" />
<colgroup class="col3" />
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
لاحظ أنه على الرغم من ذلك، فإن الخلايا تحتوي على بيانات مكتظة سوف فرض الخلية والصف والجدول المحتوي على التوسيع ليناسب.CSS overflow: auto
/ hidden
/ scroll
لا تؤثر على الخلايا.
المرجع:
نصائح أخرى
والتفاف الجدول الخاص بك في شعبة ومجموعة تجاوز للشعبة.
<div style='overflow:scroll;'>
<table>
...
</table>
</div>