Hey coders and welcome to another post. We will see how to easily make your table become responsive with just 1 LINE OF CODE! 

Focus mainly the div style overflow-x:auto to make the table responsive. However, I have added extra code to make a proper nice looking table. Here's the code below;

And that's all for this tutorial! Thanks for reading and if you have difficulties, watch my video tutorial below. Don't forget to subscribe to our YouTube channel - CodingPorium
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
  font-family:poppins;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family:poppins;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #80b0ff}
</style>
</head>
<body>

<h2>Responsive Table with Horizontal Scroll</h2>
<p>Below is a example set of data (created only for this video's purpose)</p>
<hr>
<h3>Clubhouse University Students Results</h3>

<div style="overflow-x:auto;">
  <table style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
    <tr>
      <th>Name</th>
      <th>BIRTH DATE</th>
      <th>Student ID</th>
      <th>Class</th>
      <th>IGCSE</th>
      <th>A LEVEL</th>
      <th>DEGREE SEM 1</th>
      <th>DEGREE SEM 2</th>
      <th>DEGREE SEM 3</th>
      <th>DEGREE SEM 4</th>
      <th>GRADUATION</th>
      <th>WORK PLACE</th>
     
    </tr>
    <tr>
      <td>Pete</td>
      <td>24 JUNE</td>
      <td>001</td>
      <td>3B</td>
      <td>3.47</td>
      <td>3.23</td>
      <td>3.43</td>
      <td>3.33</td>
      <td>3.27</td>
      <td>3.37</td>
      <td>3.40</td>
      <td>3.44</td>
    </tr>
    <tr>
      <td>Donald</td>
      <td>19 SEP</td>
      <td>002</td>
      <td>3C</td>
      <td>3.59</td>
      <td>3.62</td>
      <td>3.67</td>
      <td>3.5</td>
      <td>3.47</td>
      <td>3.53</td>
      <td>3.57</td>
      <td>3.62</td>
    </tr>
    <tr>
      <td>Mickey</td>
      <td>3 JAN</td>
      <td>003</td>
      <td>3B</td>
      <td>4.00</td>
      <td>4.00</td>
      <td>4.00</td>
      <td>3.97</td>
      <td>3.93</td>
      <td>3.81</td>
      <td>3.92</td>
      <td>4.00</td>
    </tr>
  </table>
</div>

</body>
</html>


Tags

1 Comments

  1. CodingPoriumJuly 28, 2021 at 12:31 AM

    Thanks for reading this far! If you found any errors or have any suggestion to make this project better, do comment it below!

    ReplyDelete

Post a Comment

Previous Post Next Post