www.webdeveloper.com
Results 1 to 2 of 2

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

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Posts
    7

    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
    Aug 2012
    Posts
    7
    how does this thread only have 1 view??

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