www.webdeveloper.com
Results 1 to 2 of 2

Thread: Header/Column Lock and Vertical/Horizontal Scroll Bars

  1. #1
    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>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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



Recent Articles