I cannot align <thead> with <tbody> in my table with SQL query

Asked

Viewed 158 times

0

I have the following table header:

<?php
    echo ' <div style="height:65px"> </div>
    <table id="oie" border="1" class="minha-table"> 
        <thead class="headerr" style="position:fixed;">
            <tr style="">
            <td style="positon:sticky; top:0;">Ref. Geral</td>
            <td style="positon:sticky; top:0;">Nivel</td>
            <td style="positon:sticky; top:0;">Numero item</td>
            <td style="positon:sticky; top:0;">Material</td>
            <td style="positon:sticky; top:0;">Descrição</td>
            <td style="positon:sticky; top:0;">Unidade</td>
            <td style="positon:sticky; top:0;">Modificação</td>
            <td style="positon:sticky; top:0;">Qtd. Eng.</td>
            <td style="positon:sticky; top:0;">Qtd. Falt.</td>
            <td style="positon:sticky; top:0;">Observação</td>
            <td style="positon:sticky; top:0;">LOCALIZADOR_2_V2</td>
            <td style="positon:sticky; top:0;">PDF PT</td>
            <td style="positon:sticky; top:0;">PDF IT</td>
            <td style="positon:sticky; top:0;">LINK JT</td>
            <td style="positon:sticky; top:0;">LINK DXF</td>
            <td style="positon:sticky; top:0;">LINK RAR</td>
            <td style="positon:sticky; top:0;">LINK ZIP</td>
            <td style="positon:sticky; top:0;">LINK EPJ</td>
        </thead>
    </tr>';

And this is the body of the table:

while($fetch = sqlsrv_fetch_array($output))
{
    //echo '<table id="oie" border="1" class="minha-table">';
    echo '<tbody> <tr style="background:'.$fetch['cordefundo'].'; text-color:'.$fetch['cordetexto'].'">';
    echo '<form id="teste" action="banco.php" method="post"><td><input  id="bike'.$fetch['referenciageral'].'" name="bike'.$fetch['referenciageral'].'" onchange="this.form.submit()"  type="checkbox" value="on" '.$fetch['checkbox'].' class="confirmacoes"><a href="banco.php"> </a></td><form>';
    echo '<td >'.utf8_encode($fetch['referenciageral']).'</td>';
    // echo '<td >'.utf8_encode($fetch['formatacao']).'</td>';
    echo '<td>'.utf8_encode($fetch['nivel']).'</td>';
    echo '<td>'.utf8_encode($fetch['numero_item']).'</td>';
    echo '<td>'.utf8_encode($fetch['material']).'</td>';
    echo '<td>'.utf8_encode($fetch['descricao']).'</td>';
    echo '<td>'.utf8_encode($fetch['unidade']).'</td>';
    echo '<td>'.utf8_encode($fetch['modificacao']).'</td>';
    echo '<td>'.utf8_encode($fetch['qtdeng']).'</td>';
    echo '<td>'.utf8_encode($fetch['qtdfalt']).'</td>';
    echo '<td>'.utf8_encode($fetch['OBSERVACAO']).'</td>';

    echo '<td><a id="logo-container" href="'.$fetch['PDF_PT'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_PDF_PT_IMAGE'].'"  /></a></td>';
    echo '<td><a id="logo-container" href="'.$fetch['PDF_IT'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_PDF_IT_IMAGE'].'"  /></a></td>';
    echo '<td><a id="logo-container" href="'.$fetch['LINK_JT'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_JT_IMAGE'].'"  /></a></td>';
    echo '<td><a id="logo-container" href="'.$fetch['LINK_DXF'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_DXF_IMAGE'].'"  /></a></td>';
    echo '<td><a id="logo-container" href="'.$fetch['LINK_RAR'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_RAR_IMAGE'].'"  /></a></td>';
    echo '<td><a id="logo-container" href="'.$fetch['LINK_ZIP'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_ZIP_IMAGE'].'"  /></a></td>';
    echo '<td><a id="logo-container" href="'.$fetch['LINK_EPJ'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_EPJ_IMAGE'].'"  /></a></td>';
};
echo '</tr>';
echo ' </tbody> </table> ';

The problem is that the thead bar is fixed as defined in the position but the columns name is not aligned with the columns. How can I fix this?

html css positioning tags
  • 2

    It would be more interesting to present an example of the rendered html in your question... It would be more practical to identify and present a solution to the error.

  • 1

    Copy the html code you render on the page, and put your full CSS in the question tb, so you can’t simulate your problem to give you an answer.

  • Have you tried checking the openings and closures of the tags in the table? There are some things half lost there in the middle...

  • html is inside php...

  • yes Darlei. Tags were all opened and closed

  • But in the correct order? See the two final lines of the first code snippet that made available to us, note that they are inverted...

  • Darlei I changed those last two lines and the error persists

  • Darlei, a note if I take the fixed bar it lines but the bar is not fixed clear

Show 3 more comments

1 answer

0

Are some small errors of formatting and opening order and closing of tags... Try the following:

<?php
    echo ' <div style="height:65px"> </div>
    <table id="oie" border="1" class="minha-table"> 
        <thead class="headerr" style="position:fixed;">
            <tr style="">
                <td style="positon:sticky; top:0;">Ref. Geral</td>
                <td style="positon:sticky; top:0;">Nivel</td>
                <td style="positon:sticky; top:0;">Numero item</td>
                <td style="positon:sticky; top:0;">Material</td>
                <td style="positon:sticky; top:0;">Descrição</td>
                <td style="positon:sticky; top:0;">Unidade</td>
                <td style="positon:sticky; top:0;">Modificação</td>
                <td style="positon:sticky; top:0;">Qtd. Eng.</td>
                <td style="positon:sticky; top:0;">Qtd. Falt.</td>
                <td style="positon:sticky; top:0;">Observação</td>
                <td style="positon:sticky; top:0;">LOCALIZADOR_2_V2</td>
                <td style="positon:sticky; top:0;">PDF PT</td>
                <td style="positon:sticky; top:0;">PDF IT</td>
                <td style="positon:sticky; top:0;">LINK JT</td>
                <td style="positon:sticky; top:0;">LINK DXF</td>
                <td style="positon:sticky; top:0;">LINK RAR</td>
                <td style="positon:sticky; top:0;">LINK ZIP</td>
                <td style="positon:sticky; top:0;">LINK EPJ</td>
            </tr>
    </thead>';

    while($fetch = sqlsrv_fetch_array($output)){
        //echo '<table id="oie" border="1" class="minha-table">';
        echo '<tbody> 
                <tr style="background:'.$fetch['cordefundo'].'; text-color:'.$fetch['cordetexto'].'">';
        echo '<td>
                <form id="teste" action="banco.php" method="post">
                    <input  id="bike'.$fetch['referenciageral'].'" name="bike'.$fetch['referenciageral'].'" onchange="this.form.submit()"  type="checkbox" value="on" '.$fetch['checkbox'].' class="confirmacoes">
                    <a href="banco.php"> </a>
                </form>
              </td>';
        echo '<td >'.utf8_encode($fetch['referenciageral']).'</td>';
        // echo '<td >'.utf8_encode($fetch['formatacao']).'</td>';
        echo '<td>'.utf8_encode($fetch['nivel']).'</td>';
        echo '<td>'.utf8_encode($fetch['numero_item']).'</td>';
        echo '<td>'.utf8_encode($fetch['material']).'</td>';
        echo '<td>'.utf8_encode($fetch['descricao']).'</td>';
        echo '<td>'.utf8_encode($fetch['unidade']).'</td>';
        echo '<td>'.utf8_encode($fetch['modificacao']).'</td>';
        echo '<td>'.utf8_encode($fetch['qtdeng']).'</td>';
        echo '<td>'.utf8_encode($fetch['qtdfalt']).'</td>';
        echo '<td>'.utf8_encode($fetch['OBSERVACAO']).'</td>';

        echo '<td><a id="logo-container" href="'.$fetch['PDF_PT'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_PDF_PT_IMAGE'].'"  /></a></td>';
        echo '<td><a id="logo-container" href="'.$fetch['PDF_IT'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_PDF_IT_IMAGE'].'"  /></a></td>';
        echo '<td><a id="logo-container" href="'.$fetch['LINK_JT'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_JT_IMAGE'].'"  /></a></td>';
        echo '<td><a id="logo-container" href="'.$fetch['LINK_DXF'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_DXF_IMAGE'].'"  /></a></td>';
        echo '<td><a id="logo-container" href="'.$fetch['LINK_RAR'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_RAR_IMAGE'].'"  /></a></td>';
        echo '<td><a id="logo-container" href="'.$fetch['LINK_ZIP'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_ZIP_IMAGE'].'"  /></a></td>';
        echo '<td><a id="logo-container" href="'.$fetch['LINK_EPJ'].'" class="brand-logo"><img src="'.$fetch['LINK_TCD#LINK_EPJ_IMAGE'].'"  /></a></td>';
};
echo '</tr>';
echo ' </tbody> </table> ';

Position Fixed can bugle the table depending on the rest of the layout, in any case test without it.

  • Darlei without it works... but I need to know how to get the thead fixed from there! Some solution?

  • position Fixed is not working?

Browser other questions tagged html css positioning tags

You are not signed in. Login or sign up in order to post.