خط طويل في طاولة HTML تلوث تخطيط الخطوط الأخرى

Question

لدي جدول HTML يعمل كتخطيط لصفحة (ممارسة سيئة أعرفها). هذا الجدول يذهب شيئا مثل هذا:

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

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

Label1    Value1    ErrorMessage
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

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

Label1    Value1    Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

خط 4 افسدت تماما. هل هناك طريقة لتحديد أن محتويات خلية رسالة الخطأ يجب أن تفيض الجدول، بدلا من تكبير المساحة للخلايا الأخرى في نفس الأعمدة؟ ربما بعض css السحرية؟

Answer 1

لجعل النص يمتد خارج الجدول، يجب أن يكون عنصر النص إما على مستوى أعلى (هرمي) من الجدول، أو يجب وضعه دون علاقة مع الجدول.

يمكنك إنجاز لاحقا عن طريق القيام بشيء ما:

Label1    Value1    <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span>
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

ثم إعطاء الطبقة الخارجية:

.outside
{
    position:absolute;
}

سيتعين عليك القيام ببعض التنسيق الإضافي للحصول عليه لإظهاره في موقع التصحيح.

تعديل:

أدركت فقط التنسيق ينظف قليلا إذا كنت تستخدم فكرة خوسية وكذلك تمتد بدلا من DIV.

table 
{
   table-layout:fixed;
   width:100em;
}

Answer 2

حسنا، إليك الحل الذي اختبره ويعمله في Firefox 3:

<style type="text/css">
#error {
    width: inherit;
    overflow: auto;
    padding: 0;
    margin: 0;
}
</style>

<table width="400">
  <tr>
    <td width="100">A</td>
    <td colspan="3" width="300">
      <div id="error">Really long line...</div>
    </td>
  </tr>
  <tr>
    <td>1A</td>
    <td>1B</td>
    <td>1C</td>
    <td>1D</td>
  </tr>
  <tr>
    <td>2A</td>
    <td>2B</td>
    <td>2C</td>
    <td>2D</td>
  </tr>
</table>

Answer 3

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

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