How to put the overflow bar at the top of the table

Navigation
1

I have a table with a bar ( overflow-x ) to scroll to the sides.

The bar is under the table, but I would like it to stay on top. I got the bar to spin the table 360 degrees and the bar 180 degrees, but it gave a problem with a graph that is on a button at the end of the table.

So, I need to put this bar at the top of the table in a way other than by rotating the table. 

<?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;

Thisishowthegraphnormallylookswhenthebarisunderthetable:

AndsoitisthegraphwhenIputthebaratthetopofthetable:

    
asked by anonymous 09.10.2018 / 14:25

1 answer

0

Here you have an option similar to this answer , but in my example the element is not rotated with transform: rotate(180deg); in my case I used transform: scaleY(-1); to "mirror" the element in eixo Y . It may be that in your case resolve buggar the graph. 

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>
    
09.10.2018 / 14:35
Cacerts file path to javax.net.ssl.trustStore does not work in .war Operations at JPA