יצירת טבלה רספונסיבית באמצעות 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.

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

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