[JavaScript]umieszczenie 6 divów obok siebie jak komórek w tabeli, kilka divów obok siebie Opcje

[jacusek]

Witam.
Stworzyłem tabelkę z kategoriami i przyciskiem po naciśnięciu którego pokazują się nazwy należące do danej kategorii. Jako, ze jestem kompletnie początkujący w kwestii JS chciałbym poprosić o pomoc. Co ciekawe statyczną tabelkę (bez chowanych elementów) udało mi się zrobić (za pomocą znaczników tabel (dane pobierane są z MYSQLa). Treść pytania nie ma znaczenia. Generalnie chodzi o to, żeby w tytułach była nazwa kategorii, a pod nim już same elementy do wybierania).

[PHP] pobierz, plaintext 
echo "<table class=\"lab\" id=\"rez\">";
$ile_w_kat=max(array(count($id_bad2)));
$ile=($ile_w_kat);
echo "<tr><td witdh=\"100%\" colspan=12 style=\" border 1 px\" bgcolor=\"#426B9C\">$kat_bad";
for($y=0;$y<$ile_w_kat;$y++){
if($y%6==0){
    echo "<tr><td><input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\"</td><td>$badanie2[$y]</td>";      
}else{
    echo "<td><input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\"</td><td>$badanie2[$y]</td>";
}
}
}
[PHP] pobierz, plaintext 

Z tą tabelą nie mam problemów. Próbowałem ją przepisać tak, zeby informacje były wyświetlane w DIVACH. Kod wygląda w sposób następujący. Omijam wszelkie nieznaczące dla rozmieszczenia na stronie części kodu.

[PHP] pobierz, plaintext 
"<style type=\"text/css\">
div {
border: 1px solid black;
margin: 0;                
padding: 2px;             
width: 100%;            
vertical-align: center;
}    
div.linia {              
display: table-row;
position: inherit;
width: 100%;
}                
div.komorka {
display: table-cell;
width: 20%;
}    
body,input
{
    font-family:\"Trebuchet ms\",arial;font-size:0.9em;
    color:#333;
    }
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    background-color:#b0c4de;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:0px;
    }
    </style>
    <script type=\"text/javascript\">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName(\"div\")[0];
    if (inner.style.display == \"none\")
        inner.style.display = \"\";
    else
        inner.style.display = \"none\";
    }
    </script>";
[PHP] pobierz, plaintext 

Ta część wiadomo js. Podejrzewam, że błąd tkwi gdzieś tutaj, którego nie widzę. Sam skrypt wyświetlający jest zrobiony analogicznie jak poprzedni w "htmlowej" tabeli.

[PHP] pobierz, plaintext 
echo "<div class=\"spoiler\">$kat_bad<br/><input type=\"button\" onclick=\"showSpoiler(this);\" 
       value=\"Lista badań:  Pokaz / Ukryj\"/>";
$ile_w_kat=max(array(count($id_bad2)));
echo "<div class=\"inner\" style=\"display:none;\">";
for($y=0;$y<$ile_w_kat;$y++){
if($y%6==0){ 
    echo "<div class=\"linia\"><div class=\"komorka\">
        <input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\">$badanie2[$y]</div>";
}else{
    echo "<div class=\"komorka\">
        <input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\">$badanie2[$y]";
}echo "</div>";
}echo "</div></div>";
}
[PHP] pobierz, plaintext 

Niestety wyświetla mi się wszystko błędnie. Ładnie pokazuje mi nazwy kategorii, ale błędnie wyświetla to co ma się pokazywać po naciśnięciu buttona. W jednym wierszu jest jedna komórka, a w następnym pięć. Chyba, ze kategoria ma mniej niż 5 elementów wówczas pokazuje się ich odpowiednio mniej. Dodatkowo komórki nie wypełniają całej szerokości strony.
Z góry dziękuję za pomoc.