blob: 88640d7a7bbcd27a3103a267969ea863f0b32c95 [file] [log] [blame]
<!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>