60 lines
1.4 KiB
HTML
60 lines
1.4 KiB
HTML
<!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>Monthly Revenues and Expenses
|
|
<details>
|
|
<summary>Table Description</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>
|