Question

I have a php code below where it is suppose to display my buttons, 7 buttons in a row. Now these buttons are displayed in a block which fades in and out. But problem is that the first 7 buttons are not displayed in the block but displayed seperatly and the other buttons are displayed in the block. Why is this happening:

Below is php code:

<table class="optionTypeTbl">
<tr>

        <?php
    $i = 1;
    foreach($num as $key => $val){
        echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";        
        if($i%7 == 0) echo"</td></tr><tr><td>";
        $i++;
    }
?>

        </tr>
        <tr>
        <td>
        <input class="gridBtns" name="btnTrueorFalseName"  id="btnTrueorFalse"  type="button"  value="True or False"  />
        <input class="gridBtns" name="btnYesorNoName"  id="btnYesorNo"  type="button"  value="Yes or No"  />
        </td>
        </tr> 
        </table>

Css:

.gridBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    }

.optionTypeTbl{
    display:none;   
    background-color:white;
    position:absolute;  
    border:1px solid black;
}

Answer 1

This may have something to do with a missing opening <td> before the buttons.

I would also re-write the loop to ensure that you don’t have empty row at the end if you have 7/14/21/etc. buttons:

<table class="optionTypeTbl">
    <?php
    $i = 1;
    foreach($num as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";        
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
    ?>

<tr>
    <td>
    <input class="gridBtns" name="btnTrueorFalseName"  id="btnTrueorFalse"  type="button"  value="True or False"  />
    <input class="gridBtns" name="btnYesorNoName"  id="btnYesorNo"  type="button"  value="Yes or No"  />
    </td>
</tr> 
</table>