1

Tenho uma tabela com um barrinha (overflow-x) pra rolar para os lados.

A barrinha está embaixo da tabela, mas gostaria que ela ficasse em cima. Consegui que a barrinha ficasse girando a tabela 360 graus e a barrinha 180 graus, mas deu um problema com um gráfico que está em um botão no fim da tabela.

Então, preciso colocar essa barrinha no alto da tabela de uma forma que não seja girando a tabela.

<?php

require 'conn.php';

//Conexão e consulta ao Mysql
$qry = mysqli_query($lnk, "select * from banco");

//Pegando os nomes dos campos
$num_fields = mysqli_num_fields($qry); //Obtém o número de campos do resultado

for($i = 0; $i < $num_fields ; $i++){ //Pega o nome dos campos
    $fields[] = mysqli_fetch_field_direct($qry, $i)->name;
}

//$barrinha imprime aquela barrinha que tem no final da tabela.
$barrinha .= '<div class="table-table" style="overflow-x:scroll;">';
echo $barrinha;

//Montando o cabeçalho da tabela
$table = '<table class="table table-striped table-inverse"> <tr style="">';

for($i = 0; $i < $num_fields; $i++){
    $table .= '<th>' . $fields[$i] . '</th>';
}

// Montando o corpo da tabela
// Tá meio gambiarrado mas pelo menos funciona.

$table .= '<tbody>';

$vermelho_jan = 0;
$verde_jan = 0;
$vermelho_dez = 0;
$verde_dez = 0;

while($r = mysqli_fetch_array($qry)) {

    $table .= '<tr>';

    if ($r['ID'] > $r['ID']) {
        $table .= '<td>' . $r['ID'] . '</td>';
    } else {
        $table .= '<td>' . $r['ID'] . '</td>';
    }

    if ($r['KPI'] > $r['KPI']) {
        $table .= '<td style="font-weight:bolder; width:120px !important;">' . $r['KPI'] . '</td>';
    }else{
        $table .= '<td style="font-weight:bolder;">' . $r['KPI'] . '</td>';
    }

    if ($r['PILOTE'] > $r['PILOTE']) {
        $table .= '<td>' . $r['PILOTE'] . '</td>';
    } else {
        $table .= '<td>' . $r['PILOTE'] . '</td>';
    }

    //Aqui começam os meses
    if ($r['JAN_PREV'] > $r['JAN_REAL']) {
        $table .= '<td>' . $r['JAN_PREV'] . '</td>';
        $table .= '<td style="background:#ff4545;">' . $r['JAN_REAL'] . '</td>';
        $vermelho_jan += 1;
    } else {
        $table .= '<td>' . $r['JAN_PREV'] . '</td>';
        $table .= '<td style="background:#c3f786;">' . $r['JAN_REAL'] . '</td>';
        $verde_jan += 1;
    }

    if ($r['DEZ_PREV'] > $r['DEZ_REAL']) {
        $table .= '<td>' . $r['DEZ_PREV'] . '</td>';
        $table .= '<td >' . $r['DEZ_REAL'] . '</td>';
        $vermelho_dez += 1;
    } else {
        $table .= '<td>' . $r['DEZ_PREV'] . '</td>';
        $table .= '<td >' . $r['DEZ_REAL'] . '</td>';
        $verde_dez += 1;
    }


    $table .= '<div class="table-table" style="overflow-x:auto;">';

    // Adicionando botão de edição
    $table .= '<td><form action="qualite-edicao.php" method="post">'; 
    $table .= '<input type="hidden" name="ID" value="' . $r['ID'] . '">';
    $table .= '<input type="hidden" name="KPI" value="' . $r['KPI'] . '">';
    $table .= '<input type="hidden" name="PILOTE" value="' . $r['PILOTE'] . '">';
    $table .= '<input type="hidden" name="JAN PREV" value="' . $r['JAN_PREV'] . '">';
    $table .= '<input type="hidden" name="JAN REAL" value="' . $r['JAN_REAL'] . '">';
    $table .= '<input type="hidden" name="DEZ PREV" value="' . $r['DEZ_PREV'] . '">';
    $table .= '<input type="hidden" name="DEZ REAL" value="' . $r['DEZ_REAL'] . '">';
    $table .= '<button class="btn btn-primary"><i class="fa fa-calendar-o" aria-hidden="true"></i></i> Editar </i></button>'; //
    $table .= '</form></td>';

    //MODAL COM OS GRÁFICOS
    $table .= '<td><form action="graf-qualite.php" method="post">'; 
    $table .= '<input type="hidden" name="ID" value="' . $r['ID'] . '">';
    $table .= '<input type="hidden" name="KPI" value="' . $r['KPI'] . ' style="">';
    $table .= '<input type="hidden" name="PILOTE" value="' . $r['PILOTE'] . '">';
    $table .= '<input type="hidden" name="JAN PREV" value="' . $r['JAN PREV'] . '">';
    $table .= '<input type="hidden" name="JAN REAL" value="' . $r['JAN REAL'] . '">';
    $table .= '<input type="hidden" name="DEZ PREV" value="' . $r['DEZ PREV'] . '">';
    $table .= '<input type="hidden" name="DEZ REAL" value="' . $r['DEZ REAL'] . '">';
    $table .= '<!-- Button -->
                <button type="button" class="btn btn-info button" data-toggle="modal" data-target="#exampleModal" name="button" onclick="abreModal(' . $r['ID'] .');">
                Gráfico
                </button>

                <!-- Modal -->

                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" onload="click("button");">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Gráfico</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>';
    $table .= '</form></td>';
}

$table .= '<tr>
            <td></td>
            <td style="background-color:#c3f786; font-weight:bolder;">GREEN</td>
            <td style="background-color:#c3f786;"></td>
            <td></td>
            <td style="font-weight:bolder;">' . $verde_jan . '</td>
            <td></td>
            <td style="font-weight:bolder;">' . $verde_dez . '</td>
        </tr>';
$table .= '<tr>
            <td></td>
            <td style="background-color:#ff4545; font-weight:bolder;">RED</td>
            <td style="background-color:#ff4545;"></td>
            <td></td>
            <td style="font-weight:bolder;">' . $vermelho_jan . '</td>
            <td></td>
            <td style="font-weight:bolder;">' . $vermelho_dez . '</td>
        </tr>';

//Finalizando a tabela
$table .= '</tbody></table>';

echo $table;

inserir a descrição da imagem aqui

Assim fica o gráfico normalmente quando a barrinha está em baixo da tabela: inserir a descrição da imagem aqui

E assim fica o gráfico quando eu coloco a barrinha no alto da tabela: inserir a descrição da imagem aqui

3
  • Serve uma solução usando jQuery?
    – Sam
    Commented 9/10/2018 às 13:41
  • Serve sim, se puder mostrar... :) Commented 9/10/2018 às 14:43
  • Ok! Dê uma olhada: jsfiddle.net/gvjo8qfd
    – Sam
    Commented 9/10/2018 às 14:48

1 Resposta 1

0

Aqui tem uma opção similar a dessa resposta, porém no meu exemplo o elemento não é rotacionado com transform: rotate(180deg); no meu caso eu usei transform: scaleY(-1); para "espelhar" o elemento no eixo Y. Pode ser que no seu caso resolva sem buggar o gráfico.

table {
  border-collapse: collapse;
  border: 1px solid #555;
}

table th,
table td {
  border: 1px solid #888;
  text-align: center;
}

.wrapper {
  width: 300px;
  overflow-x: auto;
}

.wrapper,
.content {
  transform: scaleY(-1);
}
<div class="wrapper">
  <table class="content">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>

8
  • Então, o problema é que a tabela ficou de cabeça pra baixo. Commented 9/10/2018 às 12:39
  • Eu mesma fiz aquela pergunta, mas o problema é que a resposta dela não atende mais e eu não queria fechar ela porque pode ajudar muita gente. Commented 9/10/2018 às 12:40
  • 1
    @MarianaFerreira Essa técnica que usei na minha resposta é diferente da outra, veja que na outra ele usa rotate(180deg), aqui eu usei scaleY(-1), no cade dele ele girou a tabela para ficar de cabeça para baixo, no meu caso eu "espelhei" a tabla. Olhe com atenção a minha resposta. A sua não deveria ficar de cabeça para baixo, pois o exemplo que está ai encima está certinho.... Acho que vc deixou de copiar alguma classe ou parte do CSS pro seu projeto... O principal é esse ponto: .wrapper, .content { transform: scaleY(-1); }
    – hugocsl
    Commented 9/10/2018 às 12:42
  • Primeiro: Desculpa, dei "resposta certa" antes de testar o gráfico. :/ Commented 9/10/2018 às 12:44
  • 1
    @MarianaFerreira sem problemas, como falei eu não sei se espelhar em vez de rotacionar poderia resolver o problema do gráfico. Mas se vc testou e não resolveu ai é preciso buscar alguma outra solução... Tipo algum plugin que crie uma barra de rolagem usando JS ou jQuery. Se possível coloque um print de como o gráfico está ficando com o erro
    – hugocsl
    Commented 9/10/2018 às 12:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .