CSS’de Tablo Başlıklarını Sabitlemek
CSS'de Tablo Başlıklarını Sabitlemek
Herkese merhaba,
Bu yazıda CSS’de tablo başlıklarınızı nasıl sabitleyebileceğinizden bahsedeceğim.
HTML’de tablo oluşturduktan sonra başlık kısmının scroll içinde hareket etmesini istemiyorsanız aşağıdaki CSS kodunu kullanarak siz de bu problemden kurtulabilirsiniz.
Kodları ben kendime göre revize ettim. Siz görünümü dilerseniz kendinize göre daha detaylı revize edebilirsiniz.
Aşağıdaki kod yardımıyla siz de bu işlemi rahatlıkla yapabilirsiniz.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS'de Tablo Başlıklarını Sabitlemek</title>
</head>
<body>
<div class="tablobasliksabitleme">
<table>
<thead>
<tr><th>Ad</th><th>Soyad</th></tr>
</thead>
<tbody>
<tr><td>Mustafa</td><td>Kart</td></tr>
<tr><td>Yavuz Selim</td><td>Kart</td></tr>
<tr><td>Pelin Tantoğlu</td><td>Kart</td></tr>
<tr><td>Hasan Ali</td><td>Kart</td></tr>
<tr><td>Bilge Nuray</td><td>Kart</td></tr>
<tr><td>Fevziye</td><td>Kart</td></tr>
</tbody>
</table>
</div>
</body>
</html>CSS Kodu
.tablobasliksabitleme { overflow: auto; height: 150px; }
.tablobasliksabitleme thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:lightblue }Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.
