1
2<div class="table-container">
3    <table class="custom-table">
4        <thead>
5            <tr>
6                <th>Header 1</th>
7                <th>Header 2</th>
8                <th>Header 3</th>
9            </tr>
10        </thead>
11        <tbody>
12            
13            <tr>
14                <td data-label="Header 1">Row 1, Cell 1</td>
15                <td data-label="Header 2">Row 1, Cell 2</td>
16                <td data-label="Header 3">Row 1, Cell 3</td>
17            </tr>
18            
19            <tr>
20                <td data-label="Header 1">Row 2, Cell 1</td>
21                <td data-label="Header 2">Row 2, Cell 2</td>
22                <td data-label="Header 3">Row 2, Cell 3</td>
23            </tr>
24        </tbody>
25    </table>
26</div>
27

1
2.table-container {
3    overflow-x: auto;
4}
5
6.custom-table {
7    width: 100%;
8    border-collapse: separate;
9    border-spacing: 0;
10    border: 1px solid #e5e7eb;
11    border-radius: 6px;
12    overflow: hidden;
13    font-size: 14px;
14}
15
16.custom-table th,
17.custom-table td {
18    padding: 12px;
19    text-align: left;
20    border-bottom: 1px solid #e5e7eb;
21}
22
23.custom-table th {
24    background-color: #f3f4f6;
25    color: #111827;
26    font-weight: bold;
27}
28
29.custom-table td {
30    color: #374151;
31}
32
33
34.custom-table tr:nth-child(even) {
35    background-color: #ffffff;
36}
37
38.custom-table tr:nth-child(odd) {
39    background-color: #f9fafb;
40}
41
42
43
44.custom-table tr:hover {
45    background-color: #e5e7eb;
46}
47
48
49
50@media (max-width: 640px) {
51    .custom-table {
52        border: 0;
53    }
54    .custom-table thead {
55        display: none;
56    }
57    .custom-table tr {
58        margin-bottom: 10px;
59        display: block;
60        border: 1px solid #e5e7eb;
61        border-radius: 6px;
62    }
63    .custom-table td {
64        display: block;
65        text-align: right;
66        font-size: 13px;
67        border-bottom: 1px dotted #e5e7eb;
68    }
69    .custom-table td:last-child {
70        border-bottom: 0;
71    }
72    .custom-table td:before {
73        content: attr(data-label);
74        float: left;
75        text-transform: uppercase;
76        font-weight: bold;
77    }
78}
79
80