<table>
<thead>
<tr>
<th>ID</th>  
<th>Name</th>
  <th>Email</th>
  <th>Developer</th>
  </tr>
</thead>
<tbody>
  <tr>
  <td>1</td>
  <td>Nikhil</td>
    <td>nikhilbobade27@gmail.com</td>
    <td>Frontend Developer</td>
  </tr>
</tbody>
</table>
* {
  box-sizing: border-box;
}
html {
  font-family: helvetica;
}

html, body {
  max-width: 100vw;
  background-color:#f8f8f8;
  margin: 50px 0;
}

table {
  margin: auto;
  padding:10px 5px;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
  width: fit-content;
  max-width: 100%;
  border-radius:5px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
}

td, th {
  border: solid rgb(200, 200, 200) 1px;
  padding: 1rem;
}

th {
  text-align: center;
  background-color: rgb(190, 220, 250);
  text-transform: uppercase;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: rgb(50, 50, 100) solid 2px;
  border-top: none;
}

td {
  white-space: nowrap;
  border-bottom: none;
  color: rgb(20, 20, 20);
}

td:first-of-type, th:first-of-type {
  border-left: none;
}

td:last-of-type, th:last-of-type {
  border-right: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.