لتحقيق ذلك، يمكنك استخدام خاصية CSS المسماة “border” لتحديد إطار الجدول، وإعطاء قيمة “none” للجدول الثاني لإخفاء الحدود. إليك كيفية تطبيق ذلك بشكل عملي:
في العادة، يكون لديك HTML يشبه هذا:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearing border in second table using CSStitle>
<link rel="stylesheet" href="styles.css">
head>
<body>
<table class="first-table">
<tr>
<th>Header 1th>
<th>Header 2th>
<th>Header 3th>
tr>
<tr>
<td>Data 1td>
<td>Data 2td>
<td>Data 3td>
tr>
table>
<table class="second-table">
<tr>
<th>Header Ath>
<th>Header Bth>
<th>Header Cth>
tr>
<tr>
<td>Data Atd>
<td>Data Btd>
<td>Data Ctd>
tr>
table>
body>
html>
وفي الملف “styles.css”، يمكنك إضافة القواعد التالية:
css/* إخفاء حدود الجدول الثاني */
.second-table {
border: none;
}
هذا الكود يقوم بإخفاء حدود الجدول الثاني فقط، بينما يظل الجدول الأول يحتفظ بحدوده. يمكنك تعديل الاختيارات CSS حسب الحاجة لتناسب تصميمك بشكل أفضل.
المزيد من المعلومات
بالطبع، دعني أوضح لك المزيد حول كيفية تنفيذ هذا بالتفصيل.
عند إنشاء صفحة HTML تحتوي على جدولين، وتريد أن يكون لكل جدول مظهر مختلف، يمكنك استخدام CSS لتعيين الأنماط المناسبة لكل جدول على حدة. في الكود المقترح سابقًا، قمت بإنشاء جدولين: الجدول الأول يحتوي على فئة تسمى “first-table”، بينما الجدول الثاني يحتوي على فئة تسمى “second-table”.
باستخدام CSS، يمكنك استهداف كل جدول بفئته الخاصة وتعيين الخصائص التي تريدها. في هذه الحالة، نريد إزالة الحدود فقط من الجدول الثاني. نستخدم لذلك خاصية “border” ونعطيها القيمة “none” للجدول الثاني:
css.second-table {
border: none;
}
باستخدام هذه القاعدة، يتم إزالة حدود الجدول الثاني فقط، دون التأثير على الجدول الأول. هذا يضمن أن تظهر حدود الجدول الأول كما هو متوقع، في حين يبقى الجدول الثاني بلا حدود.
بالتالي، بإضافة هذه القاعدة إلى ملف CSS الخاص بك، ستحصل على المظهر الذي تريده للجدولين. استخدم هذا النمط لتعديل المظهر بما يتناسب مع تصميم صفحتك واحتياجاتك الخاصة.
