بهترین راه برای ریسپانسیو کردن table چیست؟

حل شده 

HTML

توسط cezar در 2 سال پیش
2 14.2k 1 2 سال پیش
cezar mehdigm
0

سلام خدمت دوستان عزیز سایت
دوستان شما چطور table های html رو ریسپانسیو میکنید؟ بهترین راهش چیه؟

پاسخ ها

3

درود ، دو تا راه دارید :
راه اول استفاده از اسکرول عرضی است . که من خیلی زیاد پیشنهاد نمیکنم استفاده کنید، مگر در موارد خاص !
را دوم که خیلی کارتون رو زیبا میکنه استفاده از کد های زیر هست.

css :

body {
  font-family:Tahoma;
  direction:rtl;
}

table {
  border: 1px solid #ccc;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size:13px;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}

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

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

  table thead{
      display:none;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: left;
  }
  
  table td::before {
    content: attr(data-label);
    float: right;
    font-weight: bold;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

html:

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>نام خانوادگی</th>
      <th>کد ملی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="نام">امیر</td>
      <td data-label="نام خانوادگی">رضایی</td>
      <td data-label="کد ملی">123456</td>
    </tr>
    <tr>
      <td data-label="نام">مسعود</td>
      <td data-label="نام خانوادگی">صادقی</td>
      <td data-label="کد ملی">123456</td>
    </tr>
    <tr>
      <td data-label="نام">سامان</td>
      <td data-label="نام خانوادگی">جعفری</td>
      <td data-label="کد ملی">123456</td>
    </tr>
  </tbody>
</table>
واقعا عالی بود دقیقا چیزیه که میخواستم مرسی. کدوم کده اون کار اصلی رو انجام میده؟ یکم توضیح میدین؟ – cezar 2 سال پیش
تو همه مرورگرا جواب میده؟ – cezar 2 سال پیش
قسمت های مهم : attribute data-label در html و عنصر before:: در css – mehdigm 2 سال پیش
mehdigm 2 سال پیش

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.