Bootstrap - Class . table-Striped does not work properly within a while

Question

I’m using Bootstrap to make a system. When it comes to listing my select lines while using the lines not without zebras correctly, they come out all dark, as if all the lines were the first one on the table (I think that’s what Bootstrap is getting)But the deletion and editing of each line is working perfectly, it’s just visual. Follow the code excerpt:

$query = mysql_query(" SELECT * FROM USUARIOS ");
                            echo
                            "<table class='table table-hover table-striped'>
                          <thead>
                                </tr>
                                    <th>Nome</th>
                                    <th>E-mail</th>
                              <th></th>
                                <tr>
                          </thead>
                          <tbody>";
                          while($row = mysql_fetch_array($query)){
                                echo
                                "</tr>
                                <td>".$row['nome']."</td>
                                <td>".$row['email']."</td>
                              <td>
                                <button type='button' class='btn btn-info btn-xs' title='Detalhes' data-toggle='modal' data-target='#modalAlteracaoUsuario' data-whatever-nome='".$row['nome']."' data-whatever-email='".$row['email']."'><i class='fa fa-eye'></i></button>
                                <button type='button' class='btn btn-warning btn-xs' title='Trocar Senha' data-toggle='modal' data-target='#modalAlteracaoSenha' data-whatever-nome='".$row['nome']."' data-whatever-email='".$row['email']."'><i class='fa fa-key'></i></button>
                                <button type='button' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#modalAlteracaoUsuario' data-whatever-id='".$row['id']."' data-whatever-nome='".$row['nome']."' data-whatever-email='".$row['email']."'>Editar</button>
                                <a class='btn btn-danger btn-xs'>Excluir</a>
                              </td>
                                <tr>";
                                }
                            echo
                            "</tbody>
                        </table>";

What can I do to fix this? Thanks in advance!

Answer 1

You’re confusing opening tag with closing. To open a tag is used <tag> and to close </tag>.

In your code you were closing a tag and then opening, as in the snippet:

</tr>
    <th>Nome</th>
    <th>E-mail</th>
    <th></th>
<tr>

It was like this: (I hid the button code so it wouldn’t get too ugly)

<table class='table table-hover table-striped'>
    <thead>
        <tr>
            <th>Nome</th>
            <th>E-mail</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <?php
            $c =1;
            $row = array('nome' => 'nome', 'email' => 'email', 'id' => 0);

            echo "<tr>\n";

            while($c < 5)
            {
                echo "\t\t\t<td>".$row['nome']."</td>\n\t";
                echo "\t\t<td>".$row['email']."</td>\n\t";
                echo "\t\t<td><a class='btn btn-danger btn-xs'>Excluir</a></td>\n\t";
                echo "\t</tr>\n\n\t\t<tr>\n";
                $c ++;
            }
            ?>
        </tr>
    </tbody>
</table>

Tip, lot echo in html pure gets ugly, merge HTML with PHP.

Another thing I noticed was that while didn’t seem to have any sense of what I was doing opening and closing lines, so I adapted it by putting a logic that I always use in my applications, in the resulting source code you can see that on one more line (<tr></tr>) but it doesn’t get in the way of anything.

To stay functional on any member’s PC I put a while without database need, just for example.

Finalizing, \n(line breaking) and \t (tab, famous TAB) used in echo were just to identar the source code in the browser so that you can see the structure of a table and can understand better.