Responsive Table dengan CSS
Halo teman teman webmaster Source Code Aplikasi kali ini saya akan membahas bagaimana merancang Memiliki tampilan yang dinamis table dengan CSS. Pastinya kita tak akan mengalami maslah ketika kita mungkin sedang membuka program web kita di monitor, namun akan berantakan bila kita buka program kita di smartphone atau handphone atau pun tablet, anah bagai mana cara mengatasi , yaitu dengan dengan memiliki tampilan yang dinamis Table CSS. yuk kita praktekan bagai mana cara merancang nya.
siapkan file index.html, dan berikut strukturnya.
<!DOCTYPE html>
<html>
<head>
<title>Merancang Tabel Memiliki tampilan yang dinamis dengan CSS</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body>
<div>
<h2> Table Memiliki tampilan yang dinamis CSS</h2>
<table>
<tr>
<th> Nama Depan </th>
<th> Nama Belakang </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
<th> Nilai </th>
</tr>
<tr>
<td> Arif </td>
<td> Dumet </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
<td> 70 </td>
</tr>
<tr>
<td> Andri </td>
<td> Winata </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
</tr>
<tr>
<td> Dean </td>
<td> Andre Agasi </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
<td> 90 </td>
</tr>
</table>
</div>
</body>
</html>
begini tampilan struktur table di atas.
kita bikin CSS nya sekarang ini, seperti berikut
div{
overflow-x: auto;
width: 50%;
margin: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}bila kita buka di ukuran tablet karenanya kita dapat scroll table tersebut teman teman. begitupun ketika kita buka di handpohone atau smratphone.
demikianlah panduan Memiliki tampilan yang dinamis Table dengan CSS. Semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
