صفحه اصلی / ▼آموزشLearning / –3 آموزش سی اس اس Learning CSS3 / خاصیت HTML5 و CSS3 جدول واکنش گرا

خاصیت HTML5 و CSS3 جدول واکنش گرا

یک خاصیت از HTML5 و CSS3 باعث میشه بدون استفاده از JavaScript جداول شما در صفحه های کوچک هم قابل خواندن بشه.

 

نحوه استفاده :

با استفاده از خاصیت data-label برای مشخص کردن عناصر هر فیلد جدول.

<table>
 <caption>
 Pure HTML5 / CSS3 Responsive Table Demo
 </caption>
 <thead>
 <tr>
 <th scope="col">Account</th>
 <th scope="col">Due Date</th>
 <th scope="col">Amount</th>
 <th scope="col">Period</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td scope="row" data-label="Account">Visa - 3412</td>
 <td data-label="Due Date">04/01/2016</td>
 <td data-label="Amount">$1,190</td>
 <td data-label="Period">03/01/2016 - 03/31/2016</td>
 </tr>
 <tr>
 <td scope="row" data-label="Account">Visa - 6076</td>
 <td data-label="Due Date">03/01/2016</td>
 <td data-label="Amount">$2,443</td>
 <td data-label="Period">02/01/2016 - 02/29/2016</td>
 </tr>
 <tr>
 <td scope="row" data-label="Account">Corporate AMEX</td>
 <td data-label="Due Date">03/01/2016</td>
 <td data-label="Amount">$1,181</td>
 <td data-label="Period">02/01/2016 - 02/29/2016</td>
 </tr>
 <tr>
 <td scope="row" data-label="Acount">Visa - 3412</td>
 <td data-label="Due Date">02/01/2016</td>
 <td data-label="Amount">$842</td>
 <td data-label="Period">01/01/2016 - 01/31/2016</td>
 </tr>
 </tbody>
</table>

Style جدول html.

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

table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th, table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

استفاده از CSS3 media جداول html واکنش گرا می شوند.

@media این امکان را می دهد که  درون یک فایل css، رسانه ها و دستگاه های مختلفی را تحت کنترل خود در آورید به جای اینکه برای هر دستگاه به طور جداگانه فایل css طراحی کنید و کاربرد های آن شامل :
عرض و ارتفاع نمایشی
عرض و ارتفاع دستگاه
جهت (تبلت / تلفن در جهات افقی و یا حالت عمودی نمایش است؟)
وضوح نمایش
و مواردی بیشتر …

@media screen and (max-width: 639px) {

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;
  font-size: .8em;
  text-align: right;
}

table td:before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
  text-transform: uppercase;
}

table td:last-child { border-bottom: 0; }

}

نتیجه

درباره مدیر سایت

سعید حسینی هستم کارشناسی مهندسی نرم افزار مدیر سایت و علاقه مند به فناوری اطلاعات و تکنولوژی های نو علاقه مند به وردپرس و جوملا و مدتی افتخار همکاری با انجمن پشتیبانی وردپرس پارسی را نیز داشتم. مهارتهای نرم افزاری • وب : PHP , HTML , Java script , JQuery , asp , CSS & CSS3 , Dreamweaver • برنامه نویسی : Delphi , C ++ , C sharp • بانک اطلاعاتی : SQL Server , MySQL , Oracle • طراحی : Photoshop ورزش های مورد علاقه ام شنا و فوتبال و دوچرخه سواری هستند.

همچنین بخوانید

آشنایی با دو عنصر rgb و rgba در CSS

آشنایی با دو عنصر rgb و rgba در CSS

rgb و rgba در اصل یکی هستند . و rgba نسخه جدیدتری نسبت به rgb …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *