كيفية تقليد <table border = "2" cellpadding = "5" cellspacing = "0" width = "40٪"> في CSS

لدي عنصر جدول HTML بسيط.

<table border="2" cellpadding="5" cellspacing="0" width="40%">
    <tr><td> aaa </td><td> bbb </td></tr>
    <tr><td> ccc </td><td> ddd </td></tr>
</table>

الآن باتباع خطواتي الأولى في CSS ، أحاول محاولة تحديد نمط الجدول الأخير كـ CSS .

لا يمكنني تحقيقه - الحدود تبدو مختلفة مهما فعلت. الرجاء المساعدة.

ملف HTML الخاص بي بنمط CSS:

<table class="my_class">
    <tr><td> aaa </td><td> bbb </td></tr>
    <tr><td> ccc </td><td> ddd </td></tr>
</table>
0
وأضاف المؤلف Oswaldo Acauan, مصدر
دون تسوية/إعادة تعيين CSS مكسورة الحل. أنا جعل الآخر لا تحتاج إلى إعادة تعيين. هنا
وأضاف المؤلف Oswaldo Acauan, مصدر
إذا كانت البيانات مجدولة ، فاستخدم الجداول.
وأضاف المؤلف Salman A, مصدر
نعم ، فهمت و "القاتل" الحقيقي هو عارض HTML لكلمة مايكروسوفت (يستخدمه برنامج Outlook 2007).
وأضاف المؤلف LiMar, مصدر
أولا إغلاق فئة "النمط" ، وكنت قد كررت "الحشو"
وأضاف المؤلف MCSI, مصدر
يجب أن تعرف أن عرض جدول بدون CSS يختلف حسب المتصفح. لذلك ، سيبدو المثال الأول مختلفًا قليلاً حسب المستخدم. يبدو لونا أكثر قتامة في الكروم منه في فايرفوكس ، على سبيل المثال. سيكون من الأفضل اختيار نمط من ترضيك واستخدام ذلك فقط.
وأضاف المؤلف John, مصدر

3 إجابة

HTML

<table border="2" cellpadding="5" cellspacing="0" width="40%">
    <tr><td> aaa </td><td> bbb </td></tr>
    <tr><td> ccc </td><td> ddd </td></tr>
</table>

<table class="mytable"> <tr><td> aaa </td><td> bbb </td></tr> <tr><td> ccc </td><td> ddd </td></tr> </table>​

Here is the solution without reset.css CSS

table.mytable {
 width: 40%;
 border: 2px solid #444;  
 border-spacing: 0;    
}

table.mytable tr {border-bottom: 1px solid #444}

table.mytable td{
  border-right: 1px solid #444;
  border-bottom: 1px solid #444;
  padding: 5px;
}

table.mytable tr td:last-child{ border-right: 0 }
table.mytable tr:last-child td{ border-bottom: 0 }

Here is the solution with reset.css CSS

table.mytable {
 width: 40%;
 border: 2px solid #000;    
}

table.mytable td{
  border: 1px solid #000;
}
​
4
وأضاف
@ Šime Vidas شكرا على التحذير.
وأضاف المؤلف Oswaldo Acauan, مصدر
إذا انتهت صلاحية عروض jsFiddle الخاصة بك ، تصبح إجابتك عديمة الفائدة. الرجاء نشر الشفرة مباشرة في إجابتك أيضًا.
وأضاف المؤلف Šime Vidas, مصدر
ليس سيئا ... لا يزال مختلفا. هل يعني ذلك أنني لا أستطيع "ترجمة" سمات html في CSS والطريقة الوحيدة هي تجربة أنماط مختلفة يدويًا؟
وأضاف المؤلف LiMar, مصدر
في كل من المبنيين ، يبدو الجدولين مختلفين (Chrome)
وأضاف المؤلف lanzz, مصدر

عند استخدام جدول unstyled بسمة حد ، تبدو الحدود مختلفة في مستعرضات مختلفة. ترسم بعض المتصفحات حدودًا متينة ، وبعضها يرسم حدودًا خارجية للجدول وحدود داخلية للخلايا ، إلخ. لا توجد طريقة لتحقيق هذا التنوع في CSS. وبالكاد أي حاجة لذلك. ما عليك سوى اختيار العرض المفضل ، بعد النظر في الأدوات المختلفة التي يقدمها CSS والتي تتجاوز إلى حد كبير سمات HTML الخاصة بعروض تقديمية (باستثناء إنشاء بعض تبعيات المتصفح).

1
وأضاف

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

    <!DOCTYPE HTML>
    <html>
      <head>
        <title></title>
        <meta content="">
        
      </head>
      <body>

        <table border="2" cellpadding="5" cellspacing="0" width="40%">
        <tr><td> aaa </td><td> bbb </td></tr>
        <tr><td> ccc </td><td> ddd </td></tr>
        </table>
        

<table class="tbl"> <tr><td> aaa </td><td> bbb </td></tr> <tr><td> ccc </td><td> ddd </td></tr> </table> </body> </html>
1
وأضاف
+1 لشرح العملية.
وأضاف المؤلف LiMar, مصدر