HTML table data is shifting in another columns - html

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.

Related

Table with sticker headers: Scrolling hides the border-top and border-bottom of the table headers

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>

Freeze first two columns and last column of an HTML table that is using both horizontal and vertical scroll without JavaScript

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.

Scrollable tbody doesn't occupy all available width

I have a table that contains a lot of rows (1000+). Structure is really simple, here is a simplified example with only one row.
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
I need column names to be fixed, so I made tbody scrollable. I added these CSS rules
tbody {
display: block;
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
}
Here is a full JSfiddle example
There are 2 problems.
<tbody> doesn't occupy all the width. I tried with width: 100%; but it doesn't work. display: block; seems to prevent normal width behaviour but I need it for the scroll. How can I do it occupy all the available space? It's fine even if only 1 column get all the remaining space
<thead> and <tbody> column width is different. At the moment I use a jQuery piece of code to set headers width like other rows, this is fine but I wonder if a better solution is possible.

add this to css
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed; /* even columns width , fix width of table too*/
}

This answer can help: it gives all the possible solutions, both pure css and with jquery.
This a working solution in pure css where also <tbody> and <thead> have the same width:
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
thead {
border: 1px solid grey;
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: 100%;
}
tbody {
max-height: 150px;
width: 100%;
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
/* decorations */
.table-container {
border: 1px solid black;
padding: 0.3em;
}
table {
border: 1px solid lightgrey;
}
table td, table th {
padding: 0.3em;
border: 1px solid lightgrey;
}
table th {
border: 1px solid grey;
}
td{
word-wrap:break-word
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1akeuntveiuyrtiueyctiuyetiuyenaiuc</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value sifcaiuerycnpiuaerypintcer2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
EDIT - Alternative solution: If you remove display:block; from <tbody>, your code works.
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}

Define to this css
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid grey;
width: 100%;
text-align: left;
}
thead {
border: 1px solid grey;
}
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>

Fixed table header issues with align

I'm trying to make a table header fixed, and be able to scroll the contents of the table.
I'm able to do it through researching on how to make <th> fixed, but I have a problem.
Making <th> fixed requires at least 2 tables. I have 12 columns so it is hard to align the 2nd table with the 1st table.
1st table = contain <th> fixed
2nd table = contents
Any idea how to make the two tables align? Is there any way to make <th> fixed by only making use of one table?
<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td></td>
<td>Steps</td>
<td>Activities</td>
<td>Details</td>
<td>Responsibilities</td>
<td>Mandatory <br> Deliverables </td>
<td>Custom <br> Build</td>
<td>Packaged <br> Solution</td>
<td>Consulting <br> Services</td>
<td>Infrastructure <br> Projects </td>
<td>POC</td>
<td>Maintenance</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 101.3%">
<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>

There's a good in-depth answer by Hashem Qolami in this thread:
HTML table with 100% width, with vertical scroll inside tbody
I don't advise using two tables. Better to use one table, put the header in between
<thead>
<tr>
<th>Steps</th>
...
</tr>
</thead>
and the content of the table in between
<tbody>...</tbody>
and use some css as Hashem showed.

you can see on : http://jsfiddle.net/hashem/crspu/555/
you can easy to used below code :
<table style="width: 100%;display:block;">
<thead style=" display: inline-block;width: 100%;height: 20px;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="height:200px;display:inline-block;width:100%;overflow:auto;">
<tr>
<td>January</td>
<td>$100</td>
</tr>
........
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
<tfoot style="display: inline-block;width: 100%;height: 20px;">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

Scrollable table with header and first 3 columns fixed

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!