When I ran epubcheck on your code sample, it complained about multiple errors such as the naked <html> tag, the lack for <tr></tr> tags between the <thead></thead> tags. Then it was unhappy with your javascript.
You might want to check
Progressive Enhancement on daisy.org. The sample from there is in the spoiler/code block below and does work in Sigil's preview though not in PageEdit.
Spoiler:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Test Script</title>
<style type="text/css">
span#secret { color: rgb(255,0,0); }
div#revealed { width: 100%; text-align: center; }
span.letter {
font-size: 240%;
font-weight: bold;
color: rgb(255,0,0);
text-shadow: rgb(0,0,0) 1px 1px 2px;
animation: bleedin 2s;
}
@keyframes bleedin {
from {
font-weight: normal;
font-size: 0%;
background: rgb(255,0,0);
text-shadow: rgb(0,0,0) 1px 1px 50px;
}
to {
font-weight: bold;
font-size: 240%;
background: rgb(255,255,255);
text-shadow: rgb(0,0,0) 1px 1px 2px;
}
}
</style>
</head>
<body>
<p>The <span id="code">secret code</span> <span id="secret">D E A D M A N</span> had to be spelled out to gain passage to the pirates' lair.</p>
<script>
<![CDATA[
var code = document.getElementById('code');
code.style.color = 'rgb(0,0,200)';
code.onclick = function () { revealCode(); };
code.setAttribute('role', 'button');
code.setAttribute('tabindex', 0);
var secret = document.getElementById('secret');
secret.style.visibility = 'hidden';
secret.style.display = 'none';
secret.setAttribute('aria-hidden', true);
function revealCode() {
var revealed = document.getElementById('revealed');
if (revealed.childNodes.length == 0) {
var codeArray = 'DEADMAN'.split('');
var i = 0;
var revealLetters = setInterval(function(){
if (i < codeArray.length) {
var letter = document.createElement('span');
letter.setAttribute('class', 'letter');
letter.appendChild(document.createTextNode(codeArray[i]));
revealed.appendChild(letter);
i++;
}
else {
clearInterval(revealLetters);
}
}, 300);
}
}
]]>
</script>
<div id="revealed" aria-live="assertive"></div>
</body>
</html>