| <!DOCTYPE html> |
| <head> |
| <title>Summary Example 1</title> |
| <link rel=stylesheet href="details.css"> |
| <script src="details.js"></script> |
| <style> |
| table#expenses { |
| border: 1px solid gray; |
| width: 50%; |
| border-collapse: collapse; |
| caption-side: bottom; |
| position: relative; /* To make this a containing block. */ |
| } |
| |
| table#expenses td, table#expenses th { |
| border: 1px solid gray; |
| } |
| |
| table#expenses > caption > details { |
| display: none; |
| position: absolute; |
| background: lightyellow; |
| padding-top: 5px; |
| padding-bottom: 5px; |
| top: 100%; |
| width: 100%; |
| } |
| |
| table#expenses:hover > caption > details { |
| display: block; |
| } |
| |
| table#expenses > caption > details:focus { |
| display: block; |
| } |
| |
| </style> |
| </head> |
| |
| <body> |
| |
| <table id=expenses> |
| <tr><th>Month</th><th>Revenues</th><th>Expenses</th></tr> |
| <tr><th>January</th><td>$5,000</td><td>$10,000</td></tr> |
| <tr><th>Februuary</th><td>$4,000</td><td>$20,000</td></tr> |
| <tr><th>March</th><td>$3,000</td><td>$30,000</td></tr> |
| <tr><th>April</th><td>$2,000</td><td>$40,000</td></tr> |
| <tr><th>May</th><td>$1,000</td><td>$50,000</td></tr> |
| <caption> |
| <details> |
| <summary>Monthly Revenues and Expenses</summary>This table shows monthly revenues |
| and expenses. Each row represents a month. The columns are the month |
| name, the revenues for that month, and the expenses for that |
| month.</detail> |
| </caption> |
| </table> |
| |
| |
| </body> |
