كيف يمكنني تحديد في HTML أو CSS الحد الأدنى المطلق عرض خلية جدول

Question

ملخص

ما هي أفضل طريقة لضمان خلية الجدول لا يمكن أن يكون أقل من حد أدنى من العرض.

على سبيل المثال

كنت ترغب في التأكد من أن جميع الخلايا في الجدول على الأقل 100px واسعة التحيات من عرض الجداول الحاوية.إذا كان هناك المزيد من المساحة المتاحة خلايا الجدول يجب ملء هذا الفضاء.

التوافق المتصفح

أنا ممكن كنت ترغب في العثور على الحل الذي يعمل في

• IE 6-8
• FF 2-3
• سفاري

في ترتيب الأفضلية.

Answer 1

هذا CSS ينبغي أن يكون كافيا:

td { min-width: 100px; }

ومع ذلك, أنها ليست دائما يطاع بشكل صحيح (min-width سمة) من قبل جميع المتصفحات (على سبيل المثال ، IE6 يكره ذلك كثيرا).

تحرير: كما IE6 (وقبل) الحل, ليس هناك واحد أن يعمل بشكل صحيح تحت جميع الظروف ، بقدر ما أعرف.باستخدام nowrap HTML السمة لا يحقق النتيجة المرجوة ، كما أن فقط يمنع خط فواصل في الخلية بدلا من تحديد الحد الأدنى العرض.

ومع ذلك ، إذا nowrap يستخدم بالاقتران مع الخليوي العادية عرض المنشأة (مثل استخدام العرض:100px) ، 100px سوف تعمل مثل الحد الأدنى من عرض الخلية لا تزال تتوسع مع النص (بسبب nowrap).هذا هو أقل من مثالية الحل الذي لا يمكن تطبيقها بشكل كامل باستخدام CSS و, على هذا النحو, سوف تكون مملة لتنفيذ إذا كان لديك العديد من الجداول التي ترغب في تطبيق هذا.(طبعا هذا كله حل بديل تسقط إذا كنت تريد أن يكون ديناميكية خط فواصل في الخلايا الخاصة بك على أي حال).

Answer 2

آخر هاك هو القديم 1x1 شفافة بكسل خدعة.إدراج 1x1 شفافة صورة gif وتعيين عرضها في علامة صورة إلى العرض الذي تريده.هذا سوف يجبر الخلية على الأقل واسعة كما في الصورة.

Answer 3

أعرف أن هذا هو السؤال القديم ولكن فكرت في مشاركة شيء ما لم يكن ذكر (على الرغم من أن بسيطة جدا في مفهوم..) يمكنك فقط وضع <div> داخل الجدول (في واحدة من <td>'ق أو ما شابه) وتعيين <div> إلى min-width.الجدول سوف تتوقف عند <div>'s العرض.فكرت في رمي أن هناك في حالة شخص يأتي عبر هذا على جوجل.كما أنني لست متأكدا كيف min-width التعامل معها في آي E6.ولكن التي تم تغطيتها في جواب آخر.

Answer 4

لقد حققت بعض النجاح مع:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

على أساس مزيج من Vatos' استجابة min-height المقال هنا: http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

ماذا عن هذه خاصية css

min-width: 100px

لكنها لا تنجح في IE6 إن لم يكن مخطئا

إذا كنت لا تريد أن تفعل ذلك في css أظن يمكنك إضافة هذه السمة

nowrap="nowrap"

في جدول بيانات الوسم

Answer 6

هذا هو عبر متصفح طريقة تحديد الحد الأدنى العرض و/أو mimimum الارتفاع:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 لا يفهم !المهم
IE 6 يرى العرض/الارتفاع:200px (الكتابة السيارات)

المتصفحات الأخرى فهم مين و !المهم

أنا لست 100% مألوفة مع سلوك الاعراض في TD العناصر ، لكن كل هذا يعمل بشكل جيد على سبيل المثال علامات DIV

راجع للشغل:

على أساس مزيج من Vatos' استجابة min-height المقال هنا: http://www.dustindiaz.com/min-height-fast-hack/

هذا لا يعمل بسبب ترتيب أول خطوط 2, أنهم بحاجة إلى أن تكون في حق النظام (التفكير أعلاه)؛)

Answer 7

IE6 مقابض عرض min-width:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

إذا كنت تريد IE6 للتعامل مع العرض مثل العادية المتصفحات تعطيه overflow:visible;(ليس الحال هنا)