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>
Related
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 want to creat a table with several titles to highlight different areas.
Basically, the structure needs to look like that:
<table border="1">
<tr>
<td>Title 1</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<td>Title 2</td>
</tr>
<tr>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td>Col 7</td>
<td>Col 8</td>
</tr>
<tr>
<td>Col 8</td>
<td>Col 10</td>
</tr>
</table>
But I'm not sure, whether it's valid code.
Is there a proper tag for the title?
Here is a FIDDLE.
You should use <th> tag for the title.
UPD By the way, you can check whether the code is valid or not by using this validator
A proper way would be like this, using th with a colspan of 2 to span the 2 columns.
<table border="1">
<tr>
<th colspan="2">Title 1</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<th colspan="2">Title 2</th>
</tr>
<tr>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td>Col 7</td>
<td>Col 8</td>
</tr>
<tr>
<td>Col 8</td>
<td>Col 10</td>
</tr>
</table>
Try it
<table border="1">
<tr>
<th colspan="2">Title 1</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<th colspan="2">Title 2</th>
</tr>
<tr>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td>Col 7</td>
<td>Col 8</td>
</tr>
<tr>
<td>Col 8</td>
<td>Col 10</td>
</tr>
</table>
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>
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.