Skip to content

Commit 1aaef6b

Browse files
aayush105aayush105
authored
Merge pull request #435 from Shocker-lov-t/patch-1
Updated The existing Tables to look more amazing
2 parents 1b097a7 + 28d0dc4 commit 1aaef6b

File tree

3 files changed

+68
-34
lines changed

3 files changed

+68
-34
lines changed

‎Css Tables/index.html

+58-34
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,89 @@
22
<html>
33
<head>
44
<style>
5+
body {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
margin: 0;
11+
}
12+
13+
.table-container {
14+
width: 60%;
15+
position: relative;
16+
}
17+
518
table {
619
border-collapse: collapse;
720
width: 100%;
8-
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
21+
box-shadow: 0 0 10px 5px rgba(52, 152, 219, 0.7);
922
border-radius: 8px;
10-
overflow: hidden;
11-
margin: 20px 0;
1223
}
13-
24+
1425
th, td {
1526
padding: 15px;
1627
text-align: left;
17-
transition: box-shadow 0.3s;
28+
font-family: 'Helvetica', Arial, sans-serif;
29+
font-size: 16px;
30+
line-height: 1.5;
31+
letter-spacing: 1px;
1832
}
1933

2034
th {
2135
background-color: #3498db;
2236
color: white;
2337
}
2438

39+
th:hover {
40+
color: #e74c3c;
41+
transform: scale(1.1);
42+
transition: color 0.3s, transform 0.3s;
43+
}
44+
2545
tr:nth-child(even) {
26-
background-color: #f9f9f9;
46+
background-color: #f2f2f2;
2747
}
2848

2949
tr:nth-child(odd) {
3050
background-color: #e9e9e9;
3151
}
3252

33-
.glow:hover {
34-
box-shadow: 0 0 10px 5px rgba(52, 152, 219, 0.7);
53+
tr:hover {
54+
background-color: #3498db;
55+
color: white;
56+
transition: background-color 0.3s, color 0.3s;
3557
}
3658
</style>
3759
</head>
3860
<body>
39-
<table>
40-
<thead>
41-
<tr>
42-
<th>Header 1</th>
43-
<th>Header 2</th>
44-
<th>Header 3</th>
45-
</tr>
46-
</thead>
47-
<tbody>
48-
<tr>
49-
<td class="glow">Data 1</td>
50-
<td class="glow">Data 2</td>
51-
<td class="glow">Data 3</td>
52-
</tr>
53-
<tr>
54-
<td class="glow">Data 4</td>
55-
<td class="glow">Data 5</td>
56-
<td class="glow">Data 6</td>
57-
</tr>
58-
<tr>
59-
<td class="glow">Data 7</td>
60-
<td class="glow">Data 8</td>
61-
<td class="glow">Data 9</td>
62-
</tr>
63-
</tbody>
64-
</table>
61+
<div class="table-container">
62+
<table>
63+
<thead>
64+
<tr>
65+
<th>Header 1</th>
66+
<th>Header 2</th>
67+
<th>Header 3</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr>
72+
<td>Data 1</td>
73+
<td>Data 2</td>
74+
<td>Data 3</td>
75+
</tr>
76+
<tr>
77+
<td>Data 4</td>
78+
<td>Data 5</td>
79+
<td>Data 6</td>
80+
</tr>
81+
<tr>
82+
<td>Data 7</td>
83+
<td>Data 8</td>
84+
<td>Data 9</td>
85+
</tr>
86+
</tbody>
87+
</table>
88+
</div>
6589
</body>
6690
</html>

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,16 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
176176

177177
## <a id="Flip"></a>Flip on click
178178

179+
[<img src="images/cssTable.png" height="230" title="Css Table Demo">](https://codepen.io/TAPAS-SINGHAL/pen/abXZNWR)
180+
181+
**[⬆ back to top](#quick-links)**
182+
183+
---
184+
185+
&nbsp;
186+
187+
## <a id="Flip"></a>Flip on click
188+
179189
[<img src="images/pendulum.png" height="230" title="Pendulum Animation Demo">](https://codepen.io/TAPAS-SINGHAL/pen/ZEwOGjj)
180190

181191
**[⬆ back to top](#quick-links)**

‎images/newTable.png

20 KB
Loading

0 commit comments

Comments
 (0)