By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,685 Members | 1,902 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,685 IT Pros & Developers. It's quick & easy.

How to expand a row??

P: 2
I have a table in which there are several rows , I would like to know how to expand a row when mouse moves over that particular row and give some description about and gets back to normal when mouse out.

this is my table

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>css table</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
  8.  
  9. function mouseOver()
  10. {
  11. status="hi"
  12. }
  13.  
  14.  
  15. * {
  16.   margin: 0;
  17.   padding: 0
  18. }
  19.  
  20. .container {
  21.   background-color:#FFA500;
  22.   width: 700px;
  23.   border: 1px solid #000;
  24. }
  25. .header {
  26.   width: 700px;
  27.   border-bottom: 1px solid #000;
  28. }
  29. .header ul {
  30.   list-style: none
  31. }
  32. .header ul li {
  33.   width: 200px;
  34.   border-left: 1px solid #000;
  35.   float: left;
  36.   font-weight: bold;
  37.   padding-left: 2px;
  38. }
  39.  
  40. .data {
  41.   width: 200px;
  42.   float: left;
  43.   padding-left: 2px;
  44. }
  45.  
  46. .rowodd,.roweven {
  47.   position: relative;
  48.   width: 700px;
  49.   border-top: 1px solid #000;
  50.   background-color: #FFFF00;
  51. }
  52. .roweven {
  53.   background-color: #9ACD32;
  54. }
  55.  
  56.  
  57. .clearfix {
  58.   display: inline-block;
  59. }
  60.  
  61. </script>
  62. </head>
  63. </style>
  64.  
  65. <body>
  66. <div class="container"> 
  67.   <div class="header ">
  68.   <ul>
  69.   <li>Name</li>
  70.   <li>Marks</li>
  71.   <li>University</li>
  72.  
  73.   </ul>
  74. </div>
  75.   <div class="rowodd clearfix">
  76.     <div class="data"><p>ABCD</p></div>
  77.     <div class="data"><p>80</p></div>
  78.     <div class="data" onmouseOver="mouseOver();return true"  <p> Jawanharlal Nehru Technological University</p></div>
  79.  
  80.  
  81.  
  82.   <div class="roweven clearfix">
  83.     <div class="data"><p>PQRS</p></div>
  84.     <div class="data"><p>85</p></div>
  85.     <div class="data"><p>Osmania University </p></div>
  86.  
  87.   </div>
  88.   <div class="rowodd clearfix"><div class="data"><p>WXYZ</p></div>
  89.     <div class="data"><p>90</p></div>
  90.     <div class="data"><p>Andhra University</p></div>    
  91.  
  92.   </div>
  93.    <div class="roweven clearfix">
  94.     <div class="data"><p>PQRS</p></div>
  95.     <div class="data"><p>95</p></div>
  96.     <div class="data"><p>Sri Venkateshwara  University </p></div>
  97.  
  98.   </div>
  99. </div>
  100. </body>
  101. </html>
Aug 20 '09 #1
Share this Question
Share on Google+
2 Replies


RamananKalirajan
100+
P: 607
Hi Chotu99,
Your title says "Expanding the Row" - but in the code you have used I was not able to see any table element. On seeing your explanation i came to understand that onmouseover an element you want to display some description text. Inorder to do that use "title" attribute in the html element.

ex:
Expand|Select|Wrap|Line Numbers
  1. <div class="myDiv" title="This is the description for the user">
  2.     <!-- Your HTML Codes -->
  3. </div>
Hope this would help you. Please post back if u have any doubts.

Thanks and Regards
Ramanan Kalirajan
Aug 27 '09 #2

Dormilich
Expert Mod 5K+
P: 8,639
@chotu99
you could even use CSSí :hover pseudo-class


NOTE:
@chotu99
if you donít make use of XHTMLís XML features, you can as well use HTML
Aug 27 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.