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

حل شده 

HTML/XHTML

توسط cezar در 8 ماه پیش
2 72 1 8 ماه پیش
cezarmehdigm
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 8 ماه پیش
تو همه مرورگرا جواب میده؟ – cezar 8 ماه پیش
قسمت های مهم : attribute data-label در html و عنصر before:: در css – mehdigm 8 ماه پیش
به نظر میاد مشکلی با مرورگرها نداره ! من روی ie 11 تست کردم و به خوبی کار کرد. – mehdigm 8 ماه پیش

خوش آمدید

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

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