פעימות

יצירת טבלה רספונסיבית באמצעות 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 {
  font-family: "Assistant", sans-serif;
  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;
  letter-spacing: 1px;
}

@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.

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

תשלוםתאריך הנפקהסכוםתקופה
תשלום #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

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

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

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

השאירו תגובה

 

Up!
לבלוג