Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
<style>
.responsive-table {
width: 100%;
margin-bottom: 1.5em;
}
.responsive-table thead {
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.responsive-table thead th {
background-color: #1d96b2;
border: 1px solid #1d96b2;
font-weight: normal;
text-align: center;
color: white;
}
.responsive-table thead th:first-of-type {
text-align: left;
}
.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.responsive-table th,
.responsive-table td {
padding: .5em;
vertical-align: middle;
}
.responsive-table caption {
margin-bottom: 1em;
font-size: 1em;
font-weight: bold;
text-align: center;
}
.responsive-table tfoot {
font-size: .8em;
font-style: italic;
}
.responsive-table tbody tr {
margin-bottom: 1em;
border: 2px solid #1d96b2;
}
.responsive-table tbody tr:last-of-type {
margin-bottom: 0;
}
.responsive-table tbody th[scope="row"] {
background-color: #1d96b2;
color: white;
}
.responsive-table tbody td[data-type=currency] {
text-align: right;
}
.responsive-table tbody td[data-title]:before {
content: attr(data-title);
float: left;
font-size: .8em;
color: rgba(94, 93, 82, 0.75);
}
.responsive-table tbody td {
text-align: right;
border-bottom: 1px solid #1d96b2;
}
.responsive-table {
font-size: .9em;
}
.responsive-table thead {
position: relative;
clip: auto;
height: auto;
width: auto;
overflow: auto;
}
.responsive-table tr {
display: table-row;
}
.responsive-table th,
.responsive-table td {
display: table-cell;
padding: .5em;
}
.responsive-table caption {
font-size: 1.5em;
}
.responsive-table tbody {
display: table-row-group;
}
.responsive-table tbody tr {
display: table-row;
border-width: 1px;
}
.responsive-table tbody tr:nth-of-type(even) {
background-color: rgba(94, 93, 82, 0.1);
}
.responsive-table tbody th[scope="row"] {
background-color: transparent;
color: #5e5d52;
text-align: left;
}
.responsive-table tbody td {
text-align: center;
}
.responsive-table tbody td[data-title]:before {
content: none;
}
</style>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../table.js"></script>
<script type="application/javascript">
const COLHEADER = ROLE_COLUMNHEADER;
const ROWHEADER = ROLE_ROWHEADER;
const CELL = ROLE_CELL;
const TEXT_LEAF = ROLE_TEXT_LEAF;
function doTest() {
let accTree =
{ TABLE: [
{ CAPTION: [
{
role: ROLE_TEXT_LEAF,
name: "Top 10 Grossing Animated Films of All Time",
},
] },
{ TEXT_CONTAINER: [
{ ROW: [
{ role: COLHEADER, name: "Film Title" },
{ role: COLHEADER, name: "Released" },
{ role: COLHEADER, name: "Studio" },
{ role: COLHEADER, name: "Worldwide Gross" },
{ role: COLHEADER, name: "Domestic Gross" },
{ role: COLHEADER, name: "Foreign Gross" },
{ role: COLHEADER, name: "Budget" },
] },
] },
{ ROW: [
{ role: CELL },
] },
{ ROW: [
{ role: ROWHEADER, name: "Toy Story 3" },
{ CELL: [ { role: TEXT_LEAF, name: "2010" }] },
{ CELL: [ { role: TEXT_LEAF, name: "Disney Pixar" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$1,063,171,911" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$415,004,880" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$648,167,031" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$200,000,000" }] },
] },
{ ROW: [
{ role: ROWHEADER, name: "Shrek Forever After" },
{ CELL: [ { role: TEXT_LEAF, name: "2010" }] },
{ CELL: [ { role: TEXT_LEAF, name: "Dreamworks" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$752,600,867" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$238,736,787" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$513,864,080" }] },
{ CELL: [ { role: TEXT_LEAF, name: "$165,000,000" }] },
] },
] };
testAccessibleTree("table", accTree);
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<table class="responsive-table" id="table">
<caption>Top 10 Grossing Animated Films of All Time</caption>
<thead>
<tr>
<th scope="col">Film Title</th>
<th scope="col">Released</th>
<th scope="col">Studio</th>
<th scope="col">Worldwide Gross</th>
<th scope="col">Domestic Gross</th>
<th scope="col">Foreign Gross</th>
<th scope="col">Budget</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">Sources: <a href="http://en.wikipedia.org/wiki/List_of_highest-grossing_animated_films" rel="external">Wikipedia</a> & <a href="http://www.boxofficemojo.com/genres/chart/?id=animation.htm" rel="external">Box Office Mojo</a>. Data is current as of March 12, 2014</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Toy Story 3</th>
<td data-title="Released">2010</td>
<td data-title="Studio">Disney Pixar</td>
<td data-title="Worldwide Gross" data-type="currency">$1,063,171,911</td>
<td data-title="Domestic Gross" data-type="currency">$415,004,880</td>
<td data-title="Foreign Gross" data-type="currency">$648,167,031</td>
<td data-title="Budget" data-type="currency">$200,000,000</td>
</tr>
<tr>
<th scope="row">Shrek Forever After</th>
<td data-title="Released">2010</td>
<td data-title="Studio">Dreamworks</td>
<td data-title="Worldwide Gross" data-type="currency">$752,600,867</td>
<td data-title="Domestic Gross" data-type="currency">$238,736,787</td>
<td data-title="Foreign Gross" data-type="currency">$513,864,080</td>
<td data-title="Budget" data-type="currency">$165,000,000</td>
</tr>
</tbody>
</table>
</body>
</html>