CSS Responsive Table

-

المقصود Responsive Table هو عرض الجدول بشكل يتناسب مع الشاشة في حال كان حجم الشاشة اصغر من محتويات الجدول. بمعني اذا كان لديك جدول يحتوي على كميات كبيره من البيانات ومن الصعب عرضها جميعا في شاشة المتصفح، يمكن من خلال CSS التحكم في ذلك وعرض البيانات جميعها بإضافة horizontal scroll bar  .

يمكن أيضا التحكم ببعض الأعمدة واخفائها  في حال كان حجم الشاشة اصغر من المحتويات 

تمام نشوف كيف ممكن نضيف horizontal scroll الى الجدول 

ببساطه يمكن عمل ذلك بإضافة الامر التالي :

overflow-x:auto

شو يعني هذا الكود:

هذا الكود يعني ان scroll  بالاتجاه horizontal سيتم تطبيقه بشكل تلقائي حسب حجم الشاشة اذا كان هناك حاجه لعرض scroll فسيتم ذلك. 

طريقة الكتابة.

overflow-x: value;


القيمة هنا تكون واحد من :

القيمة 
الوصف
visible

الوضع الافتراضي. حيث لا يتم قص المحتوى ، ويتم عرضه خارج مربع المحتوى

div { overflow-x: visible; }

Hidden

يتم قطع المحتوى ، ويتم إخفاء المحتوى الزائد ولا يتم عرض شريط تمرير أفقي horizontal

div { overflow-x: hidden; }

scroll

يتم قص المحتوى ويتم عرض شريط التمرير الأفقي horizontal

div { overflow-x: scroll; }

auto

هون يقوم المستعرض بالتحكم بذلك حيث يتحكم بالمحتوى في حال كان اكبر من حجم الشاشة ، والذي يمكن أن يختلف من متصفح إلى آخر (ولكن ينتج بشكل عام عن شريط التمرير الأفقي horizontal الذي يتم عرضه على النحو المطلوب)

div { overflow-x: auto; }

inherit

يتم تطبيق الحالة حسب parent element

div { overflow-x: inherit; }

مثال :


<!DOCTYPE html>
<html>
<head>
<style>
    Div{
        overflow-x:auto;
    }
#Student {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
 
}
#Student td, #Student th {
  border: 1px solid #ddd;
  padding: 8px;
  height: 50px;
  text-align: center;
  vertical-align:bottom;
}
#Student tr:nth-child(even){background-color: #f2f2f2;}
#Student tr:hover {background-color: rgb(240, 235, 235);}
#Student th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  vertical-align:top;
  background-color: gray;
  color: white;
}
h1{
    text-align: right;
}
</style>
</head>
<body>
<h1>جدول الطلاب</h1>
<div>
<table id="Student">
  <tr>
    <th>Student #</th>
    <th>Student Name</th>
    <th>Birthday</th>
    <th>Gender</th>
    <th>Mobile</th>
    <th>Mobile2</th>
    <th>Phone</th>
    <th>Nationality</th>
    <th>Address</th>
    <th>Country</th>
    <th>City</th>
  </tr>
  <tr>
    <td>00001</td>
    <td>Layan Hatem</td>
    <td>22/08/2011</td>
    <td>Female</td>
    <td>0000000000</td>
    <td>0000000000</td>
    <td>0000000000</td>
    <td>Jordan</td>
    <td>Jordan</td>
    <td>Jordan</td>
    <td>Irbed</td>
  </tr>
  <tr>
    <td>00002</td>
    <td>Lareen Hatem</td>
    <td>22/08/2011</td>
    <td>Female</td>
    <td>0000000000</td>
    <td>0000000000</td>
    <td>0000000000</td>
    <td>Jordan</td>
    <td>Jordan</td>
    <td>Jordan</td>
    <td>Irbed</td>
  </tr>
  <tr>
    <td>00003</td>
    <td>Mlak Hatem</td>
    <td>22/08/2011</td>
    <td>Female</td>
    <td>0000000000</td>
    <td>0000000000</td>
    <td>0000000000</td>
    <td>Jordan</td>
    <td>Jordan</td>
    <td>Jordan</td>
    <td>Irbed</td>
  </tr>
</table>
</div>
</body>
</html>

شغل الصفحة وشوف النتيجة :

لاحظ ان تم إضافة Scroll في الأسفل حسب حجم الشاشة. 

في الكود السابق وضعنا الجدول في Div ثم اعطينا خاصية  overflow-x:auto; لهذا div وبناء عليه بتكون النتيجة عرض Scroll حسب حجم الشاشة. 

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

vertical  scroll

يتم عرض الشريط بشكل عمودي في هذه الحالة.

نفس الطريقة السابقة باستثناء طريقة الكتابة بتكون : 

overflow-y: value;

وشريط التمرير سواء العمودي او الأفقي يمكن تطبيقهم على معظم HTML Elements tags