CSS Table Generator | Styled HTML Table Builder - CSSKit

.styled-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 14px;
}

.styled-table thead tr {
  background-color: #4f46e5;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.styled-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

.styled-table tbody tr:hover {
  background-color: #eef2ff;
}

<div style="overflow-x: auto;">
  <table class="styled-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3</td>
        <td>Row 1 Col 4</td>
      </tr>
      <tr>
        <td>Row 2 Col 1</td>
        <td>Row 2 Col 2</td>
        <td>Row 2 Col 3</td>
        <td>Row 2 Col 4</td>
      </tr>
      <tr>
        <td>Row 3 Col 1</td>
        <td>Row 3 Col 2</td>
        <td>Row 3 Col 3</td>
        <td>Row 3 Col 4</td>
      </tr>
      <tr>
        <td>Row 4 Col 1</td>
        <td>Row 4 Col 2</td>
        <td>Row 4 Col 3</td>
        <td>Row 4 Col 4</td>
      </tr>
    </tbody>
  </table>
</div>