Responsive table is deformed

Asked

Viewed 109 times

0

I am creating the following responsive table, but it does not agree with what I want:

CSS:

table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: arial;
  }

  .table {
    border-bottom: #999999 solid 1px;
    width: 100%;
    margin-bottom: 20px;
  }

  .table th,
  .table td {
    border-right: #999999 solid 1px;
    font-size: 8px;
    padding: 8px;
    line-height: 10px;
    text-align: left;
    vertical-align: middle;
  }

  .table td:last-child {
     border-right: 0;
  }

  .table thead th {
    font-weight: normal;
    background-color: #005dab;
    color: #fff;
    font-size: 8px;
  }

  .table tbody > tr:nth-child(odd) > td,
  .table tbody > tr:nth-child(odd) > th {
    background-color: #f8f8f8;
  }


/* Small Sizes */
@media (max-width: 767px) { 

  /* Responsive Table */
  .table-responsive {
    display: block;
    position: relative;
    width: 100%;
  }

  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }
  .table-responsive td,
  .table-responsive th {
    height: 35px;
  }

  .table-responsive thead {
    float: left;
  }

  .table-responsive tbody {
    width: auto;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table-responsive tbody tr {
    display: inline-block;
  }


  .table td:last-child {
     border-right: #999999 solid 1px;
  }
}

Code:

$result_cursos = "SELECT * FROM raddb.ListagemPrduto WHERE Ativo = '1'";
$resultado_cursos = mysqli_query($conn, $result_cursos);

$tabela1 .= '<table class="table table-responsive">';

$tabela1 .= '<tr>';

$tabela1 .='<thead>';

$tabela1 .= '<tr>';

$tabela1 .= '<th rowspan=2>Produtos</th>';

$tabela1 .= '<th colspan=2>No Carro</th>';

$tabela1 .= '<th colspan=2>Na Prateleira</th>';

$tabela1 .= '<th colspan=2>Data na Emb.</th>';

$tabela1 .= '<th rowspan=2>Observação</th>';

$tabela1 .= '</tr>';

$tabela1 .= '<tr>';

$tabela1 .= '<th>Tem</th>';

$tabela1 .= '<th>Não Tem</th>';

$tabela1 .= '<th>Tem</th>';

$tabela1 .= '<th>Não Tem</th>';

$tabela1 .= '<th>Tem</th>';

$tabela1 .= '<th>Não Tem</th>';

$tabela1 .= '</tr>';

$tabela1 .='</thead>'; 

$tabela1 .='<tbody>';

$y = 0;
while($rows_cursos = mysqli_fetch_array($resultado_cursos)) {

$tabela1 .= '<div>';

$tabela1 .= '<tr>';

$tabela1 .= '<td> <input type="text" readonly="true" size="20" name= "Produto['.$y.']" class= "Produto" value="'.$rows_cursos['Descricao'].'"></td>';

$tabela1 .= '<td> <input type="radio" class="r" name= "Sim['.$y.']" value="Ok" required></td>';

$tabela1 .= '<td> <input type="radio" class="r" name= "Sim['.$y.']" value="Não Ok" required></td>';

$tabela1 .= '<td> <input type="radio" class="p" name= "Stock['.$y.']" value="Ok"></td>';

$tabela1 .= '<td> <input type="radio" class="p" name= "Stock['.$y.']" value="Não Ok"></td>';

$tabela1 .= '<td> <input type="radio" name= "DataP['.$y.']" value="Ok" '.$property.'></td>';

$tabela1 .= '<td> <input type="radio" name= "DataP['.$y.']" value="Não Ok" '.$property.'></td>';

$tabela1 .= '<td> <textarea type="text" class= "Observacao" name="Observacao['.$y.']" rows="2" cols="30"></textarea></td>';

$tabela1 .= '</tr>'; 
$y++;
}

$tabela1 .='</tbody>'; 

$tabela1 .= '</table>';

$tabela1 .= '</div>';

$tabela1 .= '</div>';

echo $tabela1;

If visualized in computer screen, returns like this:

inserir a descrição da imagem aqui

If it’s on the mobile screen it looks like this:

inserir a descrição da imagem aqui

The headers are different, even vertically should be the same format as the horizontal header

HTML rendered:

<table class="table table-responsive" id="example"> 
    <thead>  
        <tr> 
            <th>Quarto</th>
            <th>Utente</th>
            <th>Inicio Tarefa</th>
            <th>Tarefa</th>
            <th>Fim Tarefa</th>
            <th>Colaborador</th>
            <th>Observações</th>            
        </tr>
        </thead>
        <tbody>
        <tr>  
            <?php  
        do{
    ?>  
            <td><?php echo $produto["Quarto"]; ?></td> 
            <td><?php echo $produto["nome"]; ?></td> 
            <td><?php echo $produto["IniciarTarefa"]; ?></td>  
            <td><?php echo $produto["Descricao"]; ?></td> 
            <td><?php echo $produto["FimTarefa"]; ?></td>
            <td><?php echo $produto["Colaborador"]; ?></td> 
            <td><?php echo $produto["Observacao"]; ?></td>
        </tr>
<?php } while($produto = $result1->fetch_assoc()); ?>
        </tbody>

</table>
html css
  • 1

    Face and pq you are messing with the table display. Pq you are changing it the other tr/td display? The table was supposed to work perfectly, which is "spoiling" and you changing the original display to another... If you can edit the question tb, and put a table that has already rendered side in HTML, with the HTML code itself

  • @hugocsl already edited the question and added table with html code

  • Are you using Bootstrap? If yes which version?

1 answer

2


As I warned you in the comment, table is one thing that should not change the display, for it is a complex structure, with intrinsic relationship between the parts table>tr>td

By removing the display it is stable, even on small screens.

inserir a descrição da imagem aqui

Follows the code.

table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: arial;
}

.table {
    border-bottom: #999999 solid 1px;
    width: 100%;
    margin-bottom: 20px;
}

.table th,
.table td {
    border-right: #999999 solid 1px;
    font-size: 8px;
    padding: 8px;
    line-height: 10px;
    text-align: left;
    vertical-align: middle;
}

.table td:last-child {
    border-right: 0;
}

.table thead th {
    font-weight: normal;
    background-color: #005dab;
    color: #fff;
    font-size: 8px;
}

.table tbody > tr:nth-child(odd) > td,
.table tbody > tr:nth-child(odd) > th {
    background-color: #f8f8f8;
}


/* Small Sizes */
@media (max-width: 767px) {

    /* Responsive Table */
    .table-responsive {
        /* display: block; */
        position: relative;
        width: 100%;
    }

    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        /* display: block; */
    }

    .table-responsive td,
    .table-responsive th {
        height: 35px;
    }

    .table-responsive thead {
        /* float: left; */
    }

    .table-responsive tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table-responsive tbody tr {
        /* display: inline-block; */
    }


    .table td:last-child {
        border-right: #999999 solid 1px;
    }
}
<table class="table table-responsive" id="example">
    <thead>
        <tr>
            <th>Quarto</th>
            <th>Utente</th>
            <th>Inicio Tarefa</th>
            <th>Tarefa</th>
            <th>Fim Tarefa</th>
            <th>Colaborador</th>
            <th>Observações</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- <?php  
                do{
            ?> -->
            <td><?php echo $produto["Quarto"]; ?></td>
            <td><?php echo $produto["nome"]; ?></td>
            <td><?php echo $produto["IniciarTarefa"]; ?></td>
            <td><?php echo $produto["Descricao"]; ?></td>
            <td><?php echo $produto["FimTarefa"]; ?></td>
            <td><?php echo $produto["Colaborador"]; ?></td>
            <td><?php echo $produto["Observacao"]; ?></td>
        </tr>
        <tr>

            <td><?php echo $produto["Quarto"]; ?></td>
            <td><?php echo $produto["nome"]; ?></td>
            <td><?php echo $produto["IniciarTarefa"]; ?></td>
            <td><?php echo $produto["Descricao"]; ?></td>
            <td><?php echo $produto["FimTarefa"]; ?></td>
            <td><?php echo $produto["Colaborador"]; ?></td>
            <td><?php echo $produto["Observacao"]; ?></td>
        </tr>
        <tr>

            <td><?php echo $produto["Quarto"]; ?></td>
            <td><?php echo $produto["nome"]; ?></td>
            <td><?php echo $produto["IniciarTarefa"]; ?></td>
            <td><?php echo $produto["Descricao"]; ?></td>
            <td><?php echo $produto["FimTarefa"]; ?></td>
            <td><?php echo $produto["Colaborador"]; ?></td>
            <td><?php echo $produto["Observacao"]; ?></td>
        </tr>
        <tr>

            <td><?php echo $produto["Quarto"]; ?></td>
            <td><?php echo $produto["nome"]; ?></td>
            <td><?php echo $produto["IniciarTarefa"]; ?></td>
            <td><?php echo $produto["Descricao"]; ?></td>
            <td><?php echo $produto["FimTarefa"]; ?></td>
            <td><?php echo $produto["Colaborador"]; ?></td>
            <td><?php echo $produto["Observacao"]; ?></td>
        </tr>
        <!-- <?php } while($produto = $result1->fetch_assoc()); ?> -->
    </tbody>

</table>

  • I have a problem with this question that has already been answered. Could I ask a question at chat once I’ve asked the question and it’s been answered?

  • @Bruno, if this is a simple question, I’ll answer it. If it is something that will need more code there it would be nice to open a new question and put your current code explaining the problem you found etc, because here you can not put code etc, then only could to answer you in a new question. So we don’t mess up this question that has already been finally asked etc

  • 1

    the problem is that if Bir a new question will put as duplicate, so I asked if I could talk in chat and expose the problem

Browser other questions tagged html css

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