Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Transparent border

    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>
    Last edited by uxair; 02-07-2007 at 01:09 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    do you have this hosted somewhere where we can look at it?

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by uxair; 02-08-2007 at 06:46 AM.

  • #4
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    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>
    If anyone asks my boss, this counts as work, okay?

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    ......................
    Last edited by uxair; 02-09-2007 at 01:34 PM.

  • #6
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    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.
    If anyone asks my boss, this counts as work, okay?

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •