حل شده

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

بازدید14.5kپست ها1آخرین فعالیت2 سال پیش
0
2

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

1 پاسخ

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 سال پیش

سوال برنامه نویسی دارید؟

هیچ وقت در پرسیدن سوال شک نکنید

خوش آمدید

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