Menu
Edited :
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 8px;
min-width: 120px;
}
td:first-child,
th:first-child {
background-color: #003a6a !important;
color: white !important;
}
@media screen and (max-width: 780px) {
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
/* border-collapse: separate;*/
border-spacing: 0;
}
.header {
top: 0;
position: sticky;
z-index: 10000;
}
.side_header {
position: sticky;
left: 0;
z-index: 20000;
}
.common_header {
top: 0;
left: 0;
position: sticky;
z-index: 30000;
}
}<div id="table-scroll" class="table-scroll">
<table id="data" class="main-table">
<tbody>
<tr>
<th class="common_header">Header-1</th>
<th class="header">Header-2</th>
<th class="header">Header-3</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
<th class="header">Header-5</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
<th class="header">Header-5</th>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
</tr>
</tbody>
</table>
</div>Hi this is my code snippet I want to create sticky 1st column and header. Basically in mobile view I want my table to be scrollable but with first column(column 1-101) and header(header1-header4) to remain sticky and so that they are visible always. I have tried to put the first row and first column sticky, It is working for 1st column and making it sticky but it is not working for the header. Can anyone please help?
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index:4;
}
@media screen and (max-width: 500px){
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
tr:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: #ccc;
}
}<div><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<td><b>Headers</b></td>
<th><b>Header1</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header2</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header3</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header4</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content71</td>
<td>Cell content72</td>
<td>Cell content73</td>
<td>Cell content74</td>
<td>Cell content75</td>
</tr>
<tr>
<td>Cell content81</td>
<td>Cell content82</td>
<td>Cell content83</td>
<td>Cell content84</td>
<td>Cell content85</td>
</tr>
<tr>
<td>Cell content91</td>
<td>Cell content92</td>
<td>Cell content93</td>
<td>Cell content94</td>
<td>Cell content95</td>
</tr>
<tr>
<td>Cell content101</td>
<td>Cell content102</td>
<td>Cell content103</td>
<td>Cell content104</td>
<td>Cell content105</td>
</tr>
</tbody>
</table>
</div>
896
To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.
I sticked to the description of the question that the column and the header should be sticky.
Output Image:
* {
font-family: 'arial';
}
.container {
max-width: 426px;
width: 100%;
height: 300px;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 626px;
}
tr td,
tr th {
box-shadow: 0px 0px 0px 1px white inset;
padding: 20px 50px;
}
td {
background: #e1edf9;
}
th {
background: #003a6a;
color: white;
white-space: nowrap;
}
.header {
top: 0;
position: sticky;
z-index: 10000;
}
.side_header {
position: sticky;
left: 0;
z-index: 20000;
}
.common_header {
top: 0;
left: 0;
position: sticky;
z-index: 30000;
}<div class="container">
<table cellspacing="0">
<tr>
<th class="common_header">Header-1</th>
<th class="header">Header-2</th>
<th class="header">Header-3</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
</table>
</div>
answered Oct 17 '22 17:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With