חיפוש ]

יצירת טבלה רספונסיבית באמצעות CSS

אני בטוח כי תמצאו המון שיטות ומקורות המראים כיצד ליצור טבלה רספונסיבית, חלקן טובות וחלקן פחות. בין שיטות אלו תמצאו טבלאות מתוחכמות הבנויות באמצעות CSS Grid, ואף טבלאות מאד פשוטות, שאינן יכולות להקרא טבלאות רספונסיביות מכיוון והן מציגות טבלה עם גלילה (scrollbar) במובייל.

אך ישנה שיטה מאד נחמדה לבניית טבלה רספונסיבית ב- CSS המתאפשרת הודות לשימוש ב pseudo-element והתכונה content. אם אינכם מכירים תכונה זו, היא מאפשרת למפתח לקבוע את התוכן של אותו pseudo-element באופן סטטי או דינמי. לדוגמה:

.class:after { content: "I am hardcoded text from the *content* property";  }

מעבר לכך, אם אתם מעוניינים כי attribute של אלמנט כלשהו ישמש כאותו תוכן (ולכן הזכרנו את האופן הדינמי קודם לכן), תוכלו להשתמש בביטוי attr:

<div class="myClass" data-content="here you can set up the content to be used (for example)"></div>

.myClass:after { 
	content: attr(data-content); /* no quotes around attribute name! */
}

ולאחר שהסברנו זאת, נחזור לטבלה הרספונסיבית שלנו ונראה כיצד ליצור כזו באמצעות CSS, שימוש בתכונה content והביטוי attr.

לא נסביר יותר מדי, אך שימו לב כי במובייל אנו מסתירים את שורת הכותרות של הטבלה (thead), ובכדי להציג את התוכן אותן כותרות במובייל אנו משתמשים בתכונה והביטוי שהזכרנו. הנה ה HTML:

<table>
  <thead>
    <tr>
      <th>תשלום</th>
      <th>תאריך הנפקה</th>
      <th>סכום</th>
      <th>תקופה</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="תשלום">תשלום #1</td>
      <td data-label="תאריך הנפקה">02/01/2015</td>
      <td data-label="סכום">$2,311</td>
      <td data-label="תקופה">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="תשלום">תשלום #2</td>
      <td data-label="תאריך הנפקה">03/01/2015</td>
      <td data-label="סכום">$3,211</td>
      <td data-label="תקופה">02/01/2015 - 02/28/2015</td>
    </tr>
        <tr>
      <td data-label="תשלום">תשלום #3</td>
      <td data-label="תאריך הנפקה">02/01/2015</td>
      <td data-label="סכום">$2,311</td>
      <td data-label="תקופה">01/01/2012 - 01/21/2014</td>
    </tr>
    <tr>
      <td data-label="תשלום">תשלום #4</td>
      <td data-label="תאריך הנפקה">03/01/2015</td>
      <td data-label="סכום">$4,211</td>
      <td data-label="תקופה">02/01/2014 - 02/28/2016</td>
    </tr>
  </tbody>
</table>

וזה ה CSS במקרה זה:


table {
  border: 1px solid #ccc;
  width: 100%;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-weight: 300;
  font-size: 14px;
  max-width: 800px;
  margin: 20px auto;

}
thead > tr > th {
  font-weight: 600;
  font-size: 16px;
}
table tr {
  border: 1px solid #ddd;
  padding: 5px;
}

table th,
table td {
  padding: 10px;
  text-align: center;
}

table th {
  text-transform: uppercase;
  font-size: 14px;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table thead {
    display: none;
  }

  table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
  }

  table td {
    display: block;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
  }

  table td:last-child {
    border-bottom: 0;
  }

  table td:before {
    content: attr(data-label);
    float: right;
    text-transform: uppercase;
    font-weight: 600;
  }
}

השימוש בביטוי attr והתכונה content מתבצע בשורה מספר 61.

התוצאה שנקבל תהיה בסגנון הבא:

תשלוםתאריך הנפקהסכוםתקופה
תשלום #102/01/2015$2,31101/01/2015 - 01/31/2015
תשלום #203/01/2015$3,21102/01/2015 - 02/28/2015
תשלום #302/01/2015$2,31101/01/2012 - 01/21/2014
תשלום #403/01/2015$4,21102/01/2014 - 02/28/2016

אתם מוזמנים לצפות בדסקטופ ובמובייל בשביל לראות את ההבדלים (או פשוט להקטין את רוחב הדפדפן). עד כאן לטבלאות רספונסיביות.

רועי יוסף
רועי יוסף

מפתח אתרים ותבניות וורדפרס. מספק אתרים עם ביצועים גבוהים, מותאמים למנועי חיפוש ובעלי קוד ולידי, סמנטי ונקי. צריכים עזרה? צרו איתי קשר.

1 תגובות...
  • דניאל 14 אפריל 2022, 0:47

    היי רציתי לדעת אם אני רוצה שהטבלה תהיה בצורה אחרת. שהעמודה מתחת לעורך ולא ליד אין ניתן לעשות את זה. יודע לעשות את זה שאני בונה טבלה מ0 השאלה איך ניתן להפוך רק בעזרת css כי מדובר באתר וורדפרס.

תגובה חדשה

הוסיפו קוד באמצעות הכפתורים מטה. למשל, בכדי להוסיף PHP לחצו על הכפתור PHP והוסיפו את הקוד בתוך השורטקוד. מצאתם שגיאה בפוסט? עדכנו אותנו...