Style
.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }
.BigTable { width: 100%; }
.BigTable td { width: 40%; }
.BigTable td + td { width: 30%; }
.BigTable td + td + td { width: 30%; }
.Header { margin-left: 200px; height: 30px; background-color: blue; }
.Header .Heading { width: 40%; float: left; height: 30px; }
.Header .Heading + .Heading { width: 30%; }
.Header .Heading + .Heading + .Heading { width: 30%; }
Table HTML
<div class="Header">
<div class="Heading">Heading 1</div>
<div class="Heading">Heading 2</div>
<div class="Heading">Heading 3</div>
</div>
<div class="Container">
<table class="BigTable">
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>
or try this
#listBevel, #listTable {
position: absolute;
z-index: 2;
border: 1px solid #989898;
top: 85px;
left: 227px;
right: 37px;
height: 270px;
min-width: 654px;
}
/* @group List Table Headers */
#listTableHeaders {
position: absolute;
z-index: 3;
top: 67px;
left: 39px;
right: 37px;
height: 500px;
min-width: 654px;
border: 1px solid #989898;
overflow: hidden;
overflow-y: scroll;
}
.tableHeaderShadow {
background: url(/images/interface/bevel_shadow.png) repeat-x;
position: fixed;
height: 5px;
top: 105px;
right: 53px;
left: 228px;
min-width: 639px;
}
#scrollBarCoverContainer {
position: fixed;
z-index: 5;
top: 86px;
left: 228px;
right: 38px;
height: 0;
min-width: 654px;
font-size: 11px;
border: 1px none #989898;
text-align: right;
}
#scrollBarCoverUp {
background: url(/images/interface/list_header_bg.png) repeat-x;
width: 14px;
height: 18px;
border-left: 1px solid #e5e5e5;
float: right;
}
table#entryListHeaders th img.sortArrow {
float: right;
}
table#entryListHeaders th a {
color: #000;
text-decoration: none;
display: block;
height: 18px;
}
table#entryListHeaders th:hover {
background-position: 0 -18px;
cursor: default;
}
table#entryListHeaders th {
background: url(/images/interface/list_header_bg.png) repeat-x;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #a5a5a5;
text-align: left;
padding: 0 5px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
width: 42%;
font-size: 11px;
line-height: 1.6em;
text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
width: 32%;
}
table#entryListHeaders th.selectedHeader {
text-shadow: #d8e6ff 0 1px 0;
background-image: url(/images/interface/list_header_selected.png);
border-left-color: #c2d4f2;
}
#listTable {
background-color: #fefefe;
top: 104px;
height: 251px;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
font-size: 11px;
border-collapse: collapse;
}
table#entryList {
}
table#entryList td {
width: 42%;
}
span.truncateText {
display: block;
height: 18px;
overflow: hidden;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
border-right: 1px hidden #cbd1d8;
padding: 1px 5px;
height: 18px;
line-height: 1.6em;
margin: 0;
border-left-style: hidden;
border-left-width: 1px;
}
tbody.scrollContent tr.alternateRow {
background: #eaf2ff;
}
tbody.scrollContent tr.selectedRow td {
background: url(/images/interface/selected_row.png) repeat-x;
color: #fff;
border-right-style: hidden;
}
table#entryList td + td {
width: 32%;
}
tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
background-color: #d8e7ff;
cursor: default;
}
<div id="scrollBarCoverContainer">
<div id="scrollBarCoverUp"></div>
<div class="tableHeaderShadow"></div>
</div>
<div id="listTableHeaders">
<table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr>
<th id="selectedHeader">Name</th>
<th>Domain</th>
<th>>Modified</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>
No comments:
Post a Comment