<div class="container">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Country</th>
<th>Age</th>
<th>Registration Date</th>
<th>Account Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>+1-202-555-0134</td>
<td>New York</td>
<td>USA</td>
<td>34</td>
<td>2023-04-15</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>+44-20-7946-0958</td>
<td>London</td>
<td>UK</td>
<td>29</td>
<td>2022-12-01</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>Maria Garcia</td>
<td>mgarcia@example.com</td>
<td>+34-91-1234-567</td>
<td>Madrid</td>
<td>Spain</td>
<td>41</td>
<td>2021-06-20</td>
<td>Active</td>
</tr>
<tr>
<td>4</td>
<td>Li Wei</td>
<td>liwei@example.cn</td>
<td>+86-10-1234-5678</td>
<td>Beijing</td>
<td>China</td>
<td>37</td>
<td>2023-01-14</td>
<td>Pending</td>
</tr>
<tr>
<td>5</td>
<td>Ahmed Khan</td>
<td>ahmedkhan@example.pk</td>
<td>+92-42-3456-7890</td>
<td>Lahore</td>
<td>Pakistan</td>
<td>28</td>
<td>2020-11-30</td>
<td>Suspended</td>
</tr>
<tr>
<td>6</td>
<td>Emma Muller</td>
<td>emuller@example.de</td>
<td>+49-30-1234-567</td>
<td>Berlin</td>
<td>Germany</td>
<td>32</td>
<td>2022-07-08</td>
<td>Active</td>
</tr>
<tr>
<td>7</td>
<td>Carlos Mendez</td>
<td>cmendez@example.com</td>
<td>+52-55-6789-1234</td>
<td>Mexico City</td>
<td>Mexico</td>
<td>45</td>
<td>2021-09-25</td>
<td>Active</td>
</tr>
<tr>
<td>8</td>
<td>Anna Ivanova</td>
<td>ivanova@example.ru</td>
<td>+7-495-123-4567</td>
<td>Moscow</td>
<td>Russia</td>
<td>40</td>
<td>2023-02-19</td>
<td>Inactive</td>
</tr>
<tr>
<td>9</td>
<td>Yuki Tanaka</td>
<td>ytanaka@example.jp</td>
<td>+81-3-1234-5678</td>
<td>Tokyo</td>
<td>Japan</td>
<td>33</td>
<td>2020-10-10</td>
<td>Pending</td>
</tr>
<tr>
<td>10</td>
<td>Fatima Al-Sheikh</td>
<td>falsheikh@example.ae</td>
<td>+971-4-567-8901</td>
<td>Dubai</td>
<td>UAE</td>
<td>27</td>
<td>2023-05-23</td>
<td>Active</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>+1-202-555-0134</td>
<td>New York</td>
<td>USA</td>
<td>34</td>
<td>2023-04-15</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>+44-20-7946-0958</td>
<td>London</td>
<td>UK</td>
<td>29</td>
<td>2022-12-01</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>Maria Garcia</td>
<td>mgarcia@example.com</td>
<td>+34-91-1234-567</td>
<td>Madrid</td>
<td>Spain</td>
<td>41</td>
<td>2021-06-20</td>
<td>Active</td>
</tr>
<tr>
<td>4</td>
<td>Li Wei</td>
<td>liwei@example.cn</td>
<td>+86-10-1234-5678</td>
<td>Beijing</td>
<td>China</td>
<td>37</td>
<td>2023-01-14</td>
<td>Pending</td>
</tr>
<tr>
<td>5</td>
<td>Ahmed Khan</td>
<td>ahmedkhan@example.pk</td>
<td>+92-42-3456-7890</td>
<td>Lahore</td>
<td>Pakistan</td>
<td>28</td>
<td>2020-11-30</td>
<td>Suspended</td>
</tr>
<tr>
<td>6</td>
<td>Emma Muller</td>
<td>emuller@example.de</td>
<td>+49-30-1234-567</td>
<td>Berlin</td>
<td>Germany</td>
<td>32</td>
<td>2022-07-08</td>
<td>Active</td>
</tr>
<tr>
<td>7</td>
<td>Carlos Mendez</td>
<td>cmendez@example.com</td>
<td>+52-55-6789-1234</td>
<td>Mexico City</td>
<td>Mexico</td>
<td>45</td>
<td>2021-09-25</td>
<td>Active</td>
</tr>
<tr>
<td>8</td>
<td>Anna Ivanova</td>
<td>ivanova@example.ru</td>
<td>+7-495-123-4567</td>
<td>Moscow</td>
<td>Russia</td>
<td>40</td>
<td>2023-02-19</td>
<td>Inactive</td>
</tr>
<tr>
<td>9</td>
<td>Yuki Tanaka</td>
<td>ytanaka@example.jp</td>
<td>+81-3-1234-5678</td>
<td>Tokyo</td>
<td>Japan</td>
<td>33</td>
<td>2020-10-10</td>
<td>Pending</td>
</tr>
<tr>
<td>10</td>
<td>Fatima Al-Sheikh</td>
<td>falsheikh@example.ae</td>
<td>+971-4-567-8901</td>
<td>Dubai</td>
<td>UAE</td>
<td>27</td>
<td>2023-05-23</td>
<td>Active</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>+1-202-555-0134</td>
<td>New York</td>
<td>USA</td>
<td>34</td>
<td>2023-04-15</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>+44-20-7946-0958</td>
<td>London</td>
<td>UK</td>
<td>29</td>
<td>2022-12-01</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>Maria Garcia</td>
<td>mgarcia@example.com</td>
<td>+34-91-1234-567</td>
<td>Madrid</td>
<td>Spain</td>
<td>41</td>
<td>2021-06-20</td>
<td>Active</td>
</tr>
<tr>
<td>4</td>
<td>Li Wei</td>
<td>liwei@example.cn</td>
<td>+86-10-1234-5678</td>
<td>Beijing</td>
<td>China</td>
<td>37</td>
<td>2023-01-14</td>
<td>Pending</td>
</tr>
<tr>
<td>5</td>
<td>Ahmed Khan</td>
<td>ahmedkhan@example.pk</td>
<td>+92-42-3456-7890</td>
<td>Lahore</td>
<td>Pakistan</td>
<td>28</td>
<td>2020-11-30</td>
<td>Suspended</td>
</tr>
<tr>
<td>6</td>
<td>Emma Muller</td>
<td>emuller@example.de</td>
<td>+49-30-1234-567</td>
<td>Berlin</td>
<td>Germany</td>
<td>32</td>
<td>2022-07-08</td>
<td>Active</td>
</tr>
<tr>
<td>7</td>
<td>Carlos Mendez</td>
<td>cmendez@example.com</td>
<td>+52-55-6789-1234</td>
<td>Mexico City</td>
<td>Mexico</td>
<td>45</td>
<td>2021-09-25</td>
<td>Active</td>
</tr>
<tr>
<td>8</td>
<td>Anna Ivanova</td>
<td>ivanova@example.ru</td>
<td>+7-495-123-4567</td>
<td>Moscow</td>
<td>Russia</td>
<td>40</td>
<td>2023-02-19</td>
<td>Inactive</td>
</tr>
<tr>
<td>9</td>
<td>Yuki Tanaka</td>
<td>ytanaka@example.jp</td>
<td>+81-3-1234-5678</td>
<td>Tokyo</td>
<td>Japan</td>
<td>33</td>
<td>2020-10-10</td>
<td>Pending</td>
</tr>
<tr>
<td>10</td>
<td>Fatima Al-Sheikh</td>
<td>falsheikh@example.ae</td>
<td>+971-4-567-8901</td>
<td>Dubai</td>
<td>UAE</td>
<td>27</td>
<td>2023-05-23</td>
<td>Active</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>+1-202-555-0134</td>
<td>New York</td>
<td>USA</td>
<td>34</td>
<td>2023-04-15</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>+44-20-7946-0958</td>
<td>London</td>
<td>UK</td>
<td>29</td>
<td>2022-12-01</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>Maria Garcia</td>
<td>mgarcia@example.com</td>
<td>+34-91-1234-567</td>
<td>Madrid</td>
<td>Spain</td>
<td>41</td>
<td>2021-06-20</td>
<td>Active</td>
</tr>
<tr>
<td>4</td>
<td>Li Wei</td>
<td>liwei@example.cn</td>
<td>+86-10-1234-5678</td>
<td>Beijing</td>
<td>China</td>
<td>37</td>
<td>2023-01-14</td>
<td>Pending</td>
</tr>
<tr>
<td>5</td>
<td>Ahmed Khan</td>
<td>ahmedkhan@example.pk</td>
<td>+92-42-3456-7890</td>
<td>Lahore</td>
<td>Pakistan</td>
<td>28</td>
<td>2020-11-30</td>
<td>Suspended</td>
</tr>
<tr>
<td>6</td>
<td>Emma Muller</td>
<td>emuller@example.de</td>
<td>+49-30-1234-567</td>
<td>Berlin</td>
<td>Germany</td>
<td>32</td>
<td>2022-07-08</td>
<td>Active</td>
</tr>
<tr>
<td>7</td>
<td>Carlos Mendez</td>
<td>cmendez@example.com</td>
<td>+52-55-6789-1234</td>
<td>Mexico City</td>
<td>Mexico</td>
<td>45</td>
<td>2021-09-25</td>
<td>Active</td>
</tr>
<tr>
<td>8</td>
<td>Anna Ivanova</td>
<td>ivanova@example.ru</td>
<td>+7-495-123-4567</td>
<td>Moscow</td>
<td>Russia</td>
<td>40</td>
<td>2023-02-19</td>
<td>Inactive</td>
</tr>
<tr>
<td>9</td>
<td>Yuki Tanaka</td>
<td>ytanaka@example.jp</td>
<td>+81-3-1234-5678</td>
<td>Tokyo</td>
<td>Japan</td>
<td>33</td>
<td>2020-10-10</td>
<td>Pending</td>
</tr>
<tr>
<td>10</td>
<td>Fatima Al-Sheikh</td>
<td>falsheikh@example.ae</td>
<td>+971-4-567-8901</td>
<td>Dubai</td>
<td>UAE</td>
<td>27</td>
<td>2023-05-23</td>
<td>Active</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>+1-202-555-0134</td>
<td>New York</td>
<td>USA</td>
<td>34</td>
<td>2023-04-15</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>+44-20-7946-0958</td>
<td>London</td>
<td>UK</td>
<td>29</td>
<td>2022-12-01</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>Maria Garcia</td>
<td>mgarcia@example.com</td>
<td>+34-91-1234-567</td>
<td>Madrid</td>
<td>Spain</td>
<td>41</td>
<td>2021-06-20</td>
<td>Active</td>
</tr>
<tr>
<td>4</td>
<td>Li Wei</td>
<td>liwei@example.cn</td>
<td>+86-10-1234-5678</td>
<td>Beijing</td>
<td>China</td>
<td>37</td>
<td>2023-01-14</td>
<td>Pending</td>
</tr>
<tr>
<td>5</td>
<td>Ahmed Khan</td>
<td>ahmedkhan@example.pk</td>
<td>+92-42-3456-7890</td>
<td>Lahore</td>
<td>Pakistan</td>
<td>28</td>
<td>2020-11-30</td>
<td>Suspended</td>
</tr>
<tr>
<td>6</td>
<td>Emma Muller</td>
<td>emuller@example.de</td>
<td>+49-30-1234-567</td>
<td>Berlin</td>
<td>Germany</td>
<td>32</td>
<td>2022-07-08</td>
<td>Active</td>
</tr>
<tr>
<td>7</td>
<td>Carlos Mendez</td>
<td>cmendez@example.com</td>
<td>+52-55-6789-1234</td>
<td>Mexico City</td>
<td>Mexico</td>
<td>45</td>
<td>2021-09-25</td>
<td>Active</td>
</tr>
<tr>
<td>8</td>
<td>Anna Ivanova</td>
<td>ivanova@example.ru</td>
<td>+7-495-123-4567</td>
<td>Moscow</td>
<td>Russia</td>
<td>40</td>
<td>2023-02-19</td>
<td>Inactive</td>
</tr>
<tr>
<td>9</td>
<td>Yuki Tanaka</td>
<td>ytanaka@example.jp</td>
<td>+81-3-1234-5678</td>
<td>Tokyo</td>
<td>Japan</td>
<td>33</td>
<td>2020-10-10</td>
<td>Pending</td>
</tr>
<tr>
<td>10</td>
<td>Fatima Al-Sheikh</td>
<td>falsheikh@example.ae</td>
<td>+971-4-567-8901</td>
<td>Dubai</td>
<td>UAE</td>
<td>27</td>
<td>2023-05-23</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
.container {
width: 600px;
height: 400px;
outline: 2px solid purple;
overflow: auto;
}
thead {
position: sticky;
top: 0;
z-index: 2;
}
th:first-child, td:first-child {
position: sticky;
left: 0;
}
td:first-child {
background-color: white;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
min-width: 80px;
}
th {
background-color: #f2f2f2;
text-align: center;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.