إزالة الخط الأفقي العلوي لقائمة المواضيع

[Joshua_Kogan]

مرحباً. أخطط لاستخدام مربعات المواضيع، مما يلغي عناوين أعمدة قائمة المواضيع التقليدية؛ ومع ذلك، لا يقوم بإزالة الخط الأفقي المرتبط بتلك المواضيع. انظر الصور أدناه…

موقع الميتا بالنمط الفاتح:

موقعي قيد التطوير:

كيف يمكنني إزالة ذلك الخط؟ شكراً مقدماً لك!

[awesomerobot (Kris)]

يوجد هذا الحد على عنصر tbody، لذا لإزالته باستخدام CSS:

.topic-list tbody {
  border-top: none;
}

[Joshua_Kogan]

@awesomerobot

.topic-list tbody { border-top: none; }

يا هلا! لقد نجح ذلك تمامًا. شكرًا لك!

[bifterx (rob Dennis)]

كمجرد توسيع لهذا السؤال، إذا أردت تغيير لون الشريط العلوي وألوان الفواصل المتوسطة، فهل يتم ذلك في نفس المكان؟

شكرًا لك

[Johani (Joe)]

إذا كنت تشير إلى هذه

فما تحتاجه هو إضافة

.topic-list tbody {
  border-top-color: red;  // استبدل "red" بلون الحدود المطلوب
}

وسيعطي هذا التأثير

أما للفواصل المتوسطة، ستحتاج إلى إضافة

.topic-list tr {
  border-bottom-color: red; // استبدل "red" بلون الحدود المطلوب
}

وسيعطي هذا التأثير

لذا، عند جمع كل هذه العناصر معًا، سيظهر الشكل كالتالي

.topic-list {
  tbody {
    border-top-color: red;
    tr {
      border-bottom-color: red;
    }
  }
}

[bifterx (rob Dennis)]

@Johani

.topic-list { tbody { border-top-color: red; tr { border-bottom-color: red; } } }

عمل رائع، شكرًا جزيلاً!