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

حل شده 

HTML/XHTML

توسط cezar در 10 ماه پیش
2 73 1 10 ماه پیش
cezarmehdigmcezarcezarmehdigmmehdigm
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 10 ماه پیش
تو همه مرورگرا جواب میده؟ – cezar 10 ماه پیش
قسمت های مهم : attribute data-label در html و عنصر before:: در css – mehdigm 10 ماه پیش
mehdigm 10 ماه پیش

خوش آمدید

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

لطفا ابتدا لاگین کنید