هل هناك ما يعادل CSS الإعلان "width:السيارات" على <table> العناصر ؟

Question

أحاول خلق <table> أن لا يتجاوز عرض معين (دعنا نقول 500px) ، حتى مع الحدود من أي حجم.

عادة, إذا كنت تفعل:

(HTML)

<div>
  <table>
    <tr>
      <td>This is a test.</td>
    </tr>
  </table>
</div>

(CSS)

div {
  width: 500px;
}
table {
  width: 100%;
  border: 10px solid #000;
}

انا ذاهب الى نهاية المطاف مع <table> هذا هو 510px واسعة منذ نصف اليسار واليمين الحدود في نهاية المطاف خارج <div>.ما أريده هو <table> هذا هو 500px واسعة مجموع (أي أن لا يتجاوز عرض الأم/حاوية).لذا اليسار واليمين الحدود من شأنه أن يكون كل 10px واسعة ، مجموعة داخل 500px واسعة تحتوي على <div> - ولذلك الجدول المتبقية من منطقة المحتوى سيكون 480px.

يمكنني بسهولة أن تفعل هذا النوع من الشيء <div> باستخدام CSS الإعلان "width:السيارات." يمكنني أنها وهمية مع الجدول بإضافة إضافية <div> حول أنه يستخدم "width:السيارات" مع تعيين الحدود على أن <div>لا <table>.

ولكن أنا على أمل أن أكثر أناقة الحل موجود (يجب أن تكون عبر المتصفح).هل هناك واحد أنني لست على علم ؟

Answer 1

تعيين div 480px واسعة ووضع 10px الحدود على ذلك.ثم تعيين الجدول إلى 100% عرض

Answer 2

لست متأكدا إذا كان هذا العمل ولكن يمكنك الحدود الأولى (يسار الحدود) و آخر (يمين الحدود) TDs (أو TR ربما) بدلا من الجدول نفسه ؟ يجب أن تعطي نفس النتيجة البصرية.

وإلا لن تفقد الكثير من النوم على المجمع DIV.

Answer 3

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

جميع المتصفحات الأخرى تفعل العكس:وضعوا عنصر عرض أعلنت العرض ثم إضافة هامش الحشو الحدود.

أنا مجرد اختبار التعليمات البرمجية الخاصة بك في IE7 و فيرفكس 3.5 وما يظهر أن كلا من 500px واسعة حتى مع 10px الحدود السوداء.إنه الإصدارات القديمة من فايرفوكس كنت تقلق بشأن.