Fixed Table Header Scrolling

display:block;

height:400px;

overflow:auto;

}

thead, tbody tr {

display:table;

width:100%;

table-layout:fixed;

}

thead {

width: calc( 100% – 1em )

}

<thead>

<tr class=”filters” style=”background-color:#C0C0C0″>

<th align=”left”>Order</th>

<th align=”left”>Name</th>

</tr></thead>

<tbody><tr>

<td colspan=”14″ style=”text-align:center;color:#808080 “>Order</td>

<td colspan=”14″ style=”text-align:center;color:#808080 “>Name</td>

</tr></tbody>

</table>

margin:0;

padding:0;

height:100%;

}

section {

position: relative;

border: 1px solid #000;

padding-top: 37px;

background: #500;

}

section.positioned {

position: absolute;

top:100px;

left:100px;

width:800px;

box-shadow: 0 0 15px #333;

}

.container {

overflow-y: auto;

height: 200px;

}

table {

border-spacing: 0;

width:100%;

}

td + td {

border-left:1px solid #eee;

}

td, th {

border-bottom:1px solid #eee;

background: #ddd;

color: #000;

padding: 10px 25px;

}

th {

height: 0;

line-height: 0;

padding-top: 0;

padding-bottom: 0;

color: transparent;

border: none;

white-space: nowrap;

}

th div{

position: absolute;

background: transparent;

color: #fff;

padding: 9px 25px;

top: 0;

margin-left: -25px;

line-height: normal;

border-left: 1px solid #800;

}

th:first-child div{

border: none;

}

<div class=”container”>

<table>

<thead>

<tr class=”header”>

<th>

Table attribute name

<div>Table attribute name</div>

</th>

<th>

Value

<div>Value</div>

</th>

<th>

Description

<div>Description</div>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>align</td>

<td>left, center, right</td>

<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>

</tr>

<tr>

<td>bgcolor</td>

<td>rgb(x,x,x), #xxxxxx, colorname</td>

<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>

</tr>

<tr>

<td>border</td>

<td>1,””</td>

<td>Specifies whether the table cells should have borders or not</td>

</tr>

<tr>

<td>cellpadding</td>

<td>pixels</td>

<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>

</tr>

<tr>

<td>cellspacing</td>

<td>pixels</td>

<td>Not supported in HTML5. Specifies the space between cells</td>

</tr>

<tr>

<td>frame</td>

<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>

<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>

</tr>

<tr>

<td>rules</td>

<td>none, groups, rows, cols, all</td>

<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>

</tr>

<tr>

<td>summary</td>

<td>text</td>

<td>Not supported in HTML5. Specifies a summary of the content of a table</td>

</tr>

<tr>

<td>width</td>

<td>pixels, %</td>

<td>Not supported in HTML5. Specifies the width of a table</td>

</tr>

</tbody>

</table>

</div>

</section>

@header_text_color: #FDFDFD;

@alternate_row_background_color: #DDD;

@table_width: 750px;

@table_body_height: 300px;

@column_one_width: 200px;

@column_two_width: 200px;

@column_three_width: 350px;

.fixed_headers {

width: @table_width;

table-layout: fixed;

border-collapse: collapse;

th { text-decoration: underline; }

th, td {

padding: 5px;

text-align: left;

}

td:nth-child(1), th:nth-child(1) { min-width: @column_one_width; }

td:nth-child(2), th:nth-child(2) { min-width: @column_two_width; }

td:nth-child(3), th:nth-child(3) { width: @column_three_width; }

thead {

background-color: @header_background_color;

color: @header_text_color;

tr {

display: block;

position: relative;

}

}

tbody {

display: block;

overflow: auto;

width: 100%;

height: @table_body_height;

tr:nth-child(even) {

background-color: @alternate_row_background_color;

}}}

.old_ie_wrapper {

height: @table_body_height;

width: @table_width;

overflow-x: hidden;

overflow-y: auto;

tbody { height: auto; }

}

<thead>

<tr>

<th>Name</th>

<th>Color</th>

<th>Description</th>

</tr>

</thead>

<tbody>

<tr>

<td>Apple</td>

<td>Red</td>

<td>These are red.</td>

</tr>

<tr>

<td>Pear</td>

<td>Green</td>

<td>These are green.</td>

</tr>

<tr>

<td>Grape</td>

<td>Purple / Green</td>

<td>These are purple and green.</td>

</tr>

<tr>

<td>Orange</td>

<td>Orange</td>

<td>These are orange.</td>

</tr>

<tr>

<td>Banana</td>

<td>Yellow</td>

<td>These are yellow.</td>

</tr>

<tr>

<td>Kiwi</td>

<td>Green</td>

<td>These are green.</td>

</tr>

<tr>

<td>Plum</td>

<td>Purple</td>

<td>These are Purple</td>

</tr>

<tr>

<td>Watermelon</td>

<td>Red</td>

<td>These are red.</td>

</tr>

<tr>

<td>Tomato</td>

<td>Red</td>

<td>These are red.</td>

</tr>

<tr>

<td>Cherry</td>

<td>Red</td>

<td>These are red.</td>

</tr>

<tr>

<td>Cantelope</td>

<td>Orange</td>

<td>These are orange inside.</td>

</tr>

<tr>

<td>Honeydew</td>

<td>Green</td>

<td>These are green inside.</td>

</tr>

<tr>

<td>Papaya</td>

<td>Green</td>

<td>These are green.</td>

</tr>

<tr>

<td>Raspberry</td>

<td>Red</td>

<td>These are red.</td>

</tr>

<tr>

<td>Blueberry</td>

<td>Blue</td>

<td>These are blue.</td>

</tr>

<tr>

<td>Mango</td>

<td>Orange</td>

<td>These are orange.</td>

</tr>

<tr>

<td>Passion Fruit</td>

<td>Green</td>

<td>These are green.</td>

</tr>

</tbody>

</table>

<!–[if lte IE 9]>

</div>

<!–<![endif]–>