I have a table with fixed header but the header and the body are not aligned properly. The no.of columns is more than 25. If I remove "display:block", the header is not fixed.
Here is my Code
<table width="100%" style="font-size:13px" id="data" cellpadding="4" cellspacing="5" border="2" class="scrollTable">
<thead style="background:#e2e2e2" align="center" class="fixedHeader">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 21</th>
<th>Header 22</th>
<th>Header 23</th>
<th>Header 24</th>
<th>Header 25</th>
<th>Header 26</th>
<th>Header 27</th>
<th>Header 28</th>
<th>Header 29</th>
</tr>
</thead>
<tbody style="background:#f2f2f2;" align="center" class="scrollContent">
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
</tbody>
</table>
The corresponding css for this code is here
div.tableContainer {
clear: both;
height: 360px;
overflow: auto;
width: 1024px
}
/* define width of table. Add 16px to width for scrollbar. */
html>body div.tableContainer table {
width: 1024px
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}
thead.fixedHeader {
color: #000;
display: block;
text-decoration: none;
width: 100%;
}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width:100%;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th {
width: 60px
}
html>body thead.fixedHeader th + th {
width: 140px
}
html>body thead.fixedHeader th + th + th {
width: 360px
}
html>body tbody.scrollContent td {
width: 60px
}
html>body tbody.scrollContent td + td {
width: 140px
}
html>body tbody.scrollContent td + td + td {
width: 360px
}
I need the first 3 columns and header of the table to be fixed and rest of the columns scrollable. Help me out
I think I found your problem. Some of your CSS was disrupting the size of your content cells, and you needed to adjust for the size of the scrollbar by adding some padding-right: 17px; on the header row.
Here's a jsFiddle: http://jsfiddle.net/X6Ck5/
I've put your code on jsfiddle for better visibility: http://jsfiddle.net/
If I understand you correctly, you will have to work with at least two tables.
<table>
<tr class="fixed">
<th>column 1, row 1</th>
<th>column 1, row 2</th>
</tr>
<tr class="fixed">
<td>column 2, row 1</td>
<td>column 2, row 2</td>
</tr>
<tr class="fixed">
<td>column 3, row 1</td>
<td>column 3, row 2</td>
</tr>
<tr class="fixed">
<td>column 4, row 1</td>
<td>column 4, row 2</td>
</tr>
<tr>
<td colspan="2">
<table class="scrollable">
<tr>
[rest of what you would have put in your main table]
</tr>
</table>
</td>
</tr>
</table>
To make the header and the first three columns after the header sticky you will have to do the following two steps with javascript (e.g. with jquery):
duplicate everything that has the class "fixed" into a new DOM-element that looks exactly as the original content on the site
whenever the user scrolls check if the header starts to move out of screen, then make that previously made content visible and attach it to the top of the screen.
That might seem like a lot at first, but it's no magic. Here's additional resources to get you started:
Make something stick to the top of the page:
.element {position: fixed; top: 0;}
jquery clone() -> put content of your site into a new DOM-element
jquery scroll() -> check if the user scrolls and then act to it
Everything else, I am sure, you can find out! Good luck!
Related
When the horizontal scrollbar is to the left, the vertical scrollbar is not present
When the horizontal scrollbar is to the right, the scrollbar is present
How can I make the vertical scrollbar show at all times (it should only cover tbody)
Here's the Stackblitz
And here's the code anyway:
table thead,
table tbody {
display: block;
}
tbody {
height: 160px;
overflow: auto;
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
Leave out overflow: auto; from tbody, and add position: sticky; to thead. Make sure to add a background-color to thead so the table's content doesn't overlap when scrolling.
table thead,
table tbody {
display: block;
}
thead {
position: sticky;
top: 0;
background: white;
}
tbody {
height: 160px;
/* overflow: auto; */
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
I have the following example: https://plnkr.co/edit/05Hef47dumxZopRT
Initial the table looks ok, but when the table gets scrolled vertically, the border of the header cells gets hidden.
The header cells are styled with this class:
.fixed_headers thead th {
position: sticky;
position: -webkit-sticky;
top: 0; /* REQUIRED: https://stackoverflow.com/a/43707215 */
background-color: #efefef;
z-index: 10;
border: 1px solid #ccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background-clip: padding-box;
}
How is it possible that the header cell's borders will be displayed if it the table will be scrolled?
You can reset the top coordonate and add a box-shadow to blend with the table border or overlay the background while scrolling:
possible update:
.fixed_headers thead th {
position: sticky;
top: 1px; /* REQUIRED: https://stackoverflow.com/a/43707215 */
background-color: #efefef;
z-index: 10;
border: 1px solid #ccc;
box-shadow:0 -1px #ccc;
}
demo snippet below:
html * {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.responsive-table-container {
height: 300px;
width: 800px;
overflow: auto;
}
table {
border-collapse: collapse;
}
.fixed_headers {
width: 100%;
}
.fixed_headers thead tr {
position: relative;
}
.fixed_headers td,
.fixed_headers thead th {
padding: 5px;
text-align: left;
white-space: nowrap;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #f7f7f7;
color: #000;
}
.fixed_headers thead th {
position: sticky;
top: 1px;
/* REQUIRED: https://stackoverflow.com/a/43707215 */
background-color: #efefef;
z-index: 10;
border: 1px solid #ccc;
box-shadow: 0 -1px #ccc , 0 1px #ccc;
}
tbody td {
border: 1px solid #ccc;
<div class="responsive-table-container">
<table class="fixed_headers">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
<td>Value 17</td>
<td>Value 18</td>
<td>Value 19</td>
<td>Value 20</td>
</tr>
</tbody>
</table>
</div>
I am attempting to freeze the first two columns and last column of an HTML table that is using both horizontal and vertical scroll and haven't been successful. I don't have control of how the table html is output but it matches the way it is structured in the sample below (i.e. thead/tr/th tbody/tr/td. I tried using position absolute on the columns and data but it doesn't look right when scrolling.
I would like to know if it is possible to achieve this without the use of JavaScript.
table {
width: 500px;
height: 300px;
display: block;
overflow: auto;
white-space: nowrap;
}
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
</tbody>
</table>
Hope this helps, using jQuery and `css 2 colums are fixed (includes header as well)
https://jsfiddle.net/spsenthilrm/hadm9Lyw/
Note: The position left is kept on change when the user scrolls, so jQuery is required as well for this fixed 2 columns.
Whenever I am trying to make my table scroll with overflow and display block css. Table width always getting reduced and leaves empty space. Why this is happening? What I am doing wrong here. My table is inside a div.
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
css:
div{
width:500px;
height:500px;
display:block;
}
table
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
border:1px solid black;}
}
Fiddle:
http://jsfiddle.net/KrP7v/117/
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
CSS
#tableContainer{
float:left;
height:100px;
display:block;
overflow-y: scroll;
float:left
}
table
{
height:100px;
display:block;
float:left;
}
table td{
border:1px solid black;}
}
http://jsfiddle.net/4erveak/KrP7v/118/
Here is fix for your bug but at end add a div and get them style clear:both
While solving fixed header issue Table data is mis-aligning(displaying) in another columns. The header is now fixed.
Any inputs to solve mis-align of data in another columns?
<html>
<head>
</head>
<body>
<table border="1" style="width: 600px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 620px;">
<table border="1" style="width: 600px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4 Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5 Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4 Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7 Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4 Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
</table>
</div>
</body>
</html>
Why are you using a separate table for the values? You can have them in the same table.