Search

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

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

אך ישנה שיטה מאד נחמדה לבניית טבלה רספונסיבית ב- 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 במקרה זה:

body {
  direction: rtl;
}

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 מתבצע בשורה מספר 66.

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

תשלום תאריך הנפקה סכום תקופה
תשלום #1 02/01/2015 $2,311 01/01/2015 - 01/31/2015
תשלום #2 03/01/2015 $3,211 02/01/2015 - 02/28/2015
תשלום #3 02/01/2015 $2,311 01/01/2012 - 01/21/2014
תשלום #4 03/01/2015 $4,211 02/01/2014 - 02/28/2016

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

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

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

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

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

תגובה חדשה

Up!
לבלוג