www.webdeveloper.com
Results 1 to 2 of 2
  1. 09-19-2012, 03:30 PM #1
    digital.scott
    digital.scott is offline Registered User
    Join Date
    Aug 2012
    Posts
    7

    Post Header/Column Lock and Vertical/Horizontal Scroll Bars

    I cannot seem to find an answer to this question, hopefully one of you generous people can help out. I have been trying to add vertical and horizontal scroll bars to this html chart with no luck. All of the bars I add either show up as a box in the corner, or just the track without the actual scrollbar.

    Secondly, How in the world would I lock the top row or the first column like in excel? Thank you in advance!

    Code:
    <body><div style="border: 1px solid black; width: 100%; height: 100%; overflow: scroll;"></div>
<table border="1" class="jiveBorder" style="border: 1px solid #000000; width: 1500px; height: 200px;" jive-data-header="{&amp;quot;color&amp;quot;:&amp;quot;#FFFFFF&amp;quot;,&amp;quot;backgroundColor&amp;quot;:&amp;quot;#6690BC&amp;quot;,&amp;quot;textAlign&amp;quot;:&amp;quot;center&amp;quot;,&amp;quot;padding&amp;quot;:&amp;quot;2&amp;quot;,&amp;quot;fontFamily&amp;quot;:&amp;quot;arial,helvetica,sans-serif&amp;quot;}" jive-data-cell="{&amp;quot;color&amp;quot;:&amp;quot;#575757&amp;quot;,&amp;quot;textAlign&amp;quot;:&amp;quot;center&amp;quot;,&amp;quot;padding&amp;quot;:&amp;quot;0&amp;quot;,&amp;quot;backgroundColor&amp;quot;:&amp;quot;transparent&amp;quot;,&amp;quot;fontFamily&amp;quot;:&amp;quot;arial,helvetica,sans-serif&amp;quot;}">
<tbody>
<tr>
<td colspan="3" style="color: #575757; text-align: center; padding: 0px; background-color: transparent; font-family: arial, helvetica, sans-serif;"><br /></td>
<td colspan="12" style="text-align: center; color: #575757; padding: 0px; background-color: transparent; font-family: arial, helvetica, sans-serif;"><strong>2012</strong></td>
</tr>
<tr>
<th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Click on any course name to link to the course description<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;">
<p><strong>Training</strong></p>
<p><strong>Decks<br /></strong></p>
</th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong> <br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Jan<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Feb<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong> Mar<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Apr<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong> May<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Jun<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Jul<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong> Aug<br /></strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong> Sep</strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Oct</strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Nov</strong></th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px; font-family: arial, helvetica, sans-serif;"><strong>Dec</strong></th>
</tr>
<tr>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #ffff00; font-family: arial, helvetica, sans-serif;">
<p><a href="/docs/DOC-8221" _jive_internal="true">Advanced Rally Training</a></p>
<p> </p>
<p>Select this link to be placed on the waiting list =&gt; TBD</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Date</p>
<p>Time</p>
<p>Site</p>
<p>Conf Rm</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Wed - 18</p>
<p>9a - 1</p>
<p>WG</p>
<p>1007</p>
</td>
</tr>
<tr>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #ffff00; font-family: arial, helvetica, sans-serif;">
<p><a href="/docs/DOC-7947" _jive_internal="true">Agile Scrum Bootcamp</a></p>
<p> </p>
<p>Select this link to be placed on the waiting list =&gt; TBD</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p>Date</p>
<p>Time</p>
<p>Site</p>
<p>Conf Rm</p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;"><br /></td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p> </p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p> </p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p> </p>
</td>
<td style="color: #575757; text-align: center; padding: 0px; background-color: #adff2f; font-family: arial, helvetica, sans-serif;">
<p> </p>
</td>
</tr>
</tbody>
</table>
<p> </p></body>
    Reply With Quote Reply With Quote
  2. 09-25-2012, 10:40 PM #2
    holyhttp's Avatar
    holyhttp
    holyhttp is offline Registered User
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    494
    Please paste the URL to your test page because the HTML provided does not show the full picture.
    For instance where is the "jiveBorder" CSS class defined?
    How is the "jive-data-header" used?

    By showing a live web page you can help you better understand the issue.
    Web Developer SF Bay Area, CA - Hands-on Training Online - Custom Blog Design
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles