HTML+CSS+JavaScript

Доброго дня...
Есть необходимость сделать таблицу достаточно большого размера...
Для более удобного поиска необходимой информации по разделам пытался сделать возможность скрытия некоторых ее частей...
Если делать как отдельные таблицы - скрыть можно но плывут столбцы...
Если делать как везде в ИНете предлагают - не скрывает вообще... Предлагается скрытие выделенной части под определенным ID, все в итоге сводится к этому...
Пример:
<style> .acco .acc{display:none;}</style>
<button onclick=document.getElementById('acco1').className=''>ОТОБРАЗИТЬ</button> &nbsp;
<button onclick=document.getElementById('acco1').className='acco'>скрыть</button>
<div id=acco1 class=acco>
<div class=acc>СТРОКА АККОРДОВ1</div>
<div>строка текста 1</div>
<div class=acc>СТРОКА АККОРДОВ 2</div>
<div>строка текста 2</div>
<div class=acc>СТРОКА АККОРДОВ3</div>
<div>строка текста 3</div>
</div>

Со строками все ОК... но как сделать со строками таблиц - не уразумею... Голова кипит...

Помогите, пожалуйста... Если есть что посоветовать... ;)
Заранее благодарю...

Можете тоже самое но для TR таблицы, т.е. присваиваете строке таблицы ID (не имя) и обращаяь по ID к строке таблицы - показываете/скрываете ее.