Hi, I’d like to be able to have the Table Captions be links that show/hide the table data? Does anyone have an idea how I can do this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table, tr, th, td {
margin: 0; padding: 0;
border: 1;
}
table {
margin: 0 40px;
border-bottom: 1px solid #e7e7e7;
caption-side: top;
}
caption {
margin: 10px 40px 0 40px; padding: 5px 10px;
text-align: left;
color: #fff;
font-weight: bold;
background: #06c;
-moz-border-radius: 3px;
}
th {
margin: 0; padding: 5px 10px;
font-weight: normal;
text-align: left;
color: #888; background: #ccc;
}
td, tbody th {
padding: 10px;
border-top: 1px solid #e7e7e7;
vertical-align: top;
}
.row1, .row1 td, .row1 th {
background: #fff;
}
.row2, .row2 td, .row2 th {
background: #fafaf7;
}
.left-col { width: 80px; }
.midl-col { width: 250px;}
.rite-col {width: 12px;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="5" border="1">
<caption style="background: green;">Caption</caption>
<thead>
<tr>
<th scope="col" class="left-col">HEAD 1</th>
<th scope="col" class="midl-col">HEAD 2</th>
<th scope="col" class="rite-col">Ap.</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td>02-25-2005</td>
<td>At the Printer</td>
<td>√</td>
</tr>
<tr class="row1">
<td>02-25-2005</td>
<td>At the Printer</td>
<td>√</td>
</tr>
<tr class="row1">
<td>02-25-2005</td>
<td>At the Printer</td>
<td>√</td>
</tr>
</tbody>
</table>
</body>
</html>