Transparent border

uxair · 02-07-2007, 06:54 AM

Below is the code in which I've a static grid-header, this is working fine but the issue is that whenever user scrolls down, the rows that r scrolled upwards can be seen through the grid headers.
so, is there a way I could set the border by which the scrolled data could not be seen through the transparebt borders.

Code:

<html>
<head>

<STYLE>

thead th
	{	top: expression(document.getElementById("tbl-container").scrollTop-2);z-index:20;position:relative;
		}


</STYLE>

<title>Lock Columns, Column Locking, Freeze Columns in HTML 
Tables</title>

</head>

	<div id="tbl-container"; STYLE="width: 940px;	height: 100px;	overflow:auto;">

		<table id="tbl"; STYLE="table-layout: fixed;">
			<thead>
				<tr height=20px; STYLE="color:Navy; background-color : #a6b7FF;">
					<th rowspan=2; STYLE="width:100px">Customer Name</th>
					<th rowspan=2; STYLE="width:100px">Customer Address</th>
					<th colspan=3; STYLE="width:240px">Ready Exposure</th>
					<th colspan=3; STYLE="width:240px">Future Exposure</th>
					<th rowspan=2; STYLE="width:60px">Share Type</th>
					<th rowspan=2; STYLE="width:100px">Cash</th>
					<th rowspan=2; STYLE="width:100px">Auto Sell Status</th>
				</tr>

				<tr height=20px; STYLE="color:Navy; background-color : #a6b7FF;">
					<th>Allowed</th>
					<th>Used</th>
					<th>Diff in Exposure</th>
					<th>Allowed</th>
					<th>Used</th>
					<th>Diff in Exposure</th>
				</tr>
			</thead>

			<tbody>
				<tr height=20px; STYLE="background-color: #D6E7FF;">
					<td>Student01</td>
					<td>Languages</td>
					<td>male</td>
					<td>80</td>
					<td>70</td>
					<td>75</td>
					<td>80</td>
					<td>50</td>
					<td>Max. Loss</td>
					<td>50,000</td>
					<td>Enable</td>
				</tr>

				<tr height=20px; STYLE="background-color: #D6E7FF;">
					<td>Student02</td>
					<td>Mathematics</td>
					<td>male</td>
					<td>90</td>
					<td>88</td>
					<td>100</td>
					<td>90</td>
					<td>10</td>
					<td>Min. Price</td>
					<td>150,000</td>
					<td>Disable</td>
				</tr height=20px;>

				<tr height=20px; STYLE="background-color: #D6E7FF;">
					<td>Student03</td>
					<td>Languages</td>
					<td>female</td>
					<td>85</td>
					<td>95</td>
					<td>80</td>
					<td>85</td>
					<td>40</td>
					<td>Max. Profit</td>
					<td>100,000</td>
					<td>Postponed</td>
				</tr>

				<tr height=20px; STYLE="background-color: #D6E7FF;">
					<td>Student03</td>
					<td>Languages</td>
					<td>female</td>
					<td>85</td>
					<td>95</td>
					<td>80</td>
					<td>85</td>
					<td>40</td>
					<td>Max. Profit</td>
					<td>100,000</td>
					<td>Postponed</td>
				</tr>

			</tbody>
		</table>
	</div>
</body>
</html>

chazthetic · 02-07-2007, 10:59 PM

do you have this hosted somewhere where we can look at it?

uxair · 02-08-2007, 04:42 AM

no mate, not hosted any where, but u can have a look at it by making a html file from the code, and offcourse I'm testing it on IE

PS: Scroll the data in the table and observe the horizontal line seprating "Ready Exposure" and "Allowed ...", u will see some thing going upwards. from the transparent border

butlins · 02-08-2007, 12:57 PM

Your code was a little untidy, so I hope you don't mind me reworking it. There's no styling in the HTML anymore - each cell is now styled by a class. Adding a white border to the cells stops text showing through. The scrolling doesn't work in FireFox, though - the whole table scrolls including the header.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#tbl-container {
/*	width: 940px;*/
	height: 100px;
	overflow:auto;
}

table#tbl {
	table-layout: fixed;
	border:1px solid #FFF;
	border-collapse:collapse
}

#tbl-container tr {
	height: 20px;
}

#tbl-container thead th {
	top: expression(document.getElementById("tbl-container").scrollTop-2);
	border:1px solid #FFF;
	margin:0;
	padding:0;
	z-index:20;
	position:relative;
}

#tbl-container thead tr {
	color:Navy; 
	background-color : #a6b7FF;
}

#tbl-container tbody tr {
	background-color: #D6E7FF;
}

#tbl-container tbody td{
	border:1px solid #FFF;
	margin:0;
	padding:0;
}

th.name, td.name {width:100px;}
th.address, td.address {width:100px;}
th.readyexposure, th.futureexposure {width:240px;}
th.readyexposure_allowed, td.readyexposure_allowed {width:60px;}
th.readyexposure_used, td.readyexposure_used {width:60px;}
th.readyexposure_diffexposure, td.readyexposure_diffexposure {width:120px;}
th.futureexposure_allowed, td.futureexposure_allowed {width:60px;}
th.futureexposure_used, td.futureexposure_used {width:60px;}
th.futureexposure_diffexposure, td.futureexposure_diffexposure {width:120px;}
th.sharetype, td.sharetype {width:60px;}
th.cash, td.cash {width:100px;}
th.autosell, td.autosell {width:100px;}
</style>
<title>Lock Columns, Column Locking, Freeze Columns in HTML Tables</title>
</head>
<body>
<div id="tbl-container">
  <table id="tbl">
    <thead>
      <tr>
        <th rowspan="2;" class="name">Customer Name</th>
        <th rowspan="2;" class="address">Customer Address</th>
        <th colspan="3;" class="readyexposure">Ready Exposure</th>
        <th colspan="3;" class="futureexposure">Future Exposure</th>
        <th rowspan="2;" class="sharetype">Share Type</th>
        <th rowspan="2;" class="cash">Cash</th>
        <th rowspan="2;" class="autosell">Auto Sell Status</th>
      </tr>
      <tr>
        <th class="readyexposure_allowed">Allowed</th>
        <th class="readyexposure_used">Used</th>
        <th class="readyexposure_diffexposure">Diff in Exposure</th>
        <th class="futureexposure_allowed">Allowed</th>
        <th class="futureexposure_used">Used</th>
        <th class="futureexposure_diffexposure">Diff in Exposure</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name">Student01</td>
        <td class="address">Languages</td>
        <td class="readyexposure_allowed">male</td>
        <td class="readyexposure_used">80</td>
        <td class="readyexposure_diffexposure">70</td>
        <td class="futureexposure_allowed">75</td>
        <td class="futureexposure_used">80</td>
        <td class="futureexposure_diffexposure">50</td>
        <td class="sharetype">Max. Loss</td>
        <td class="cash">50,000</td>
        <td class="autosell">Enable</td>
      </tr>
      <tr>
        <td class="name">Student02</td>
        <td class="address">Mathematics</td>
        <td class="readyexposure_allowed">male</td>
        <td class="readyexposure_used">90</td>
        <td class="readyexposure_diffexposure">88</td>
        <td class="futureexposure_allowed">100</td>
        <td class="futureexposure_used">90</td>
        <td class="futureexposure_diffexposure">10</td>
        <td class="sharetype">Min. Price</td>
        <td class="cash">150,000</td>
        <td class="autosell">Disable</td>
      </tr>
      <tr>
        <td class="name">Student03</td>
        <td class="address">Languages</td>
        <td class="readyexposure_allowed">female</td>
        <td class="readyexposure_used">85</td>
        <td class="readyexposure_diffexposure">95</td>
        <td class="futureexposure_allowed">80</td>
        <td class="futureexposure_used">85</td>
        <td class="futureexposure_diffexposure">40</td>
        <td class="sharetype">Max. Profit</td>
        <td class="cash">100,000</td>
        <td class="autosell">Postponed</td>
      </tr>
      <tr>
        <td class="name">Student03</td>
        <td class="address">Languages</td>
        <td class="readyexposure_allowed">female</td>
        <td class="readyexposure_used">85</td>
        <td class="readyexposure_diffexposure">95</td>
        <td class="futureexposure_allowed">80</td>
        <td class="futureexposure_used">85</td>
        <td class="futureexposure_diffexposure">40</td>
        <td class="sharetype">Max. Profit</td>
        <td class="cash">100,000</td>
        <td class="autosell">Postponed</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

uxair · 02-09-2007, 12:31 PM

definitely not, u should b quite humble in calling it little, infact it is quite untidy, infact i don't bother making classes during testing (bad habbit) .............. anyways

OK, one thing that isn't working for me is that i'm unable to assign the classname in my .aspx page this is what I'm trying to do

...................

Code:

<script language=javascript src="../Scripts/RiskManagerSummary.js"></script>
<style type="text/javascript">
#divExposure thead th {
{
color:Red;
POSITION: relative;
TOP: expression(document.getElementById('divExposure').scrollTop-2;
/*is it due to the fact that it isn't recognizing divexposure???????????????*/
}
</style>

<meta content="Microsoft Visual Studio .NET 7.1" name=GENERATOR>

...................

and this is the th definition

......................

Code:

          <th align=center>Allowed</th>
          <th align=center>Used</th>
          <th align=center>Diff in Exposure</th>

......................

butlins · 02-09-2007, 12:43 PM

I'm afraid that's beyond me - my scripting is strictly plug and play with pre-built chunks of code. You might be better off asking the question in the Javascript or DOM scripting forum.

uxair · 02-10-2007, 08:51 AM

I must say that I've commited a silly mistake and a more offencive one by posting in the forum

This is what I was doing wrong
<style type="text/javascript">
how can u write css within javascript styling tag
<style type="text/css">