///////// Style
<style type="text/css">
.Tbl-fixed-headers
{
width:
750px;
table-layout:
fixed;
border-collapse:
collapse;
}
.Tbl-fixed-headers th {
text-decoration:
underline;
}
.Tbl-fixed-headers th,
.Tbl-fixed-headers td
{
padding:
5px;
text-align:
left;
}
.Tbl-fixed-headers td:nth-child(1),
.Tbl-fixed-headers th:nth-child(1)
{
min-width:
200px;
}
.Tbl-fixed-headers td:nth-child(2),
.Tbl-fixed-headers th:nth-child(2)
{
min-width:
200px;
}
.Tbl-fixed-headers td:nth-child(3),
.Tbl-fixed-headers th:nth-child(3)
{
width:
350px;
}
.Tbl-fixed-headers thead
{
background-color:
#333;
color:
#FDFDFD;
}
.Tbl-fixed-headers thead tr
{
display:
block;
position:
relative;
}
.Tbl-fixed-headers tbody
{
display:
block;
overflow:
auto;
width:
100%;
height:
300px;
}
.Tbl-fixed-headers tbody tr:nth-child(even)
{
background-color:
#DDD;
}
.old_ie_wrapper
{
height:
300px;
width:
750px;
overflow-x:
hidden;
overflow-y:
auto;
}
.old_ie_wrapper tbody
{
height:
auto;
}
</style>
//////////////// Html
<table class="Tbl-fixed-headers" border="1">
<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 and this is healthy</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These
are green and this is healthy</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple
/ Green</td>
<td>These
are purple and green and this is healthy</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These
are orange and this is healthy</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These
are yellow and this is healthy</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These
are green and this is healthy</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These
are Purple and this is healthy</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These
are red and this is healthy</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These
are red and this is healthy</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These
are red and this is healthy</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These
are orange inside and this is healthy</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These
are green inside and this is healthy</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These
are green and this is healthy</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These
are red and this is healthy</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These
are blue and this is healthy</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These
are orange and this is healthy</td>
</tr>
<tr>
<td>Passion
Fruit</td>
<td>Green</td>
<td>These
are green and this is healthy</td>
</tr>
</tbody>
</table>
/////////////// Result
Me too, thanks for sharing this..
ReplyDeleteI'm having a little problem I cant subscribe your rss feed, I'm using google reader fyi.
RCG Online Store