1

necesito que la tabla mantenga su tamaño para que salga el scroll horizontal y no se minimice el contenido de la tabla. O sea que la tabla active el scroll horizontal.

Al parecer el form-control del input es el que esta haciendo que no se active el scroll y solucionar eso.

por ejemplo en la ventana maximizada se despliega la tabla normal

introducir la descripción de la imagen aquí

pero cuando se minimiza la pantalla la tabla se recoge y no mantiene su tamaño para que aparezca el scroll horizontal en la parte de abajo

introducir la descripción de la imagen aquí

al poner form-control-sm en el input '<input type="text" class="form-control-sm"' si me lo hace pero se pierde la forma del input-group

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">


</head>
<body class="hold-transition sidebar-mini layout-fixed">
    <table class="table table-bordered table-sm text-center text-nowrap">


    <?php

        function is_player($round, $row, $team) {
            return $row == pow(2, $round-1) + 1 + pow(2, $round)*($team - 1);
        }

        $num_teams = 16;
        $total_rounds = floor(log($num_teams, 2)) + 1;
        $max_rows = $num_teams*2;
        $team_array = array();
        $unpaired_array = array();
        $score_array = array();

        for ($round = 1; $round <= $total_rounds; $round++) {
            $team_array[$round] = 1;
            $unpaired_array[$round] = False;
            $score_array[$round] = False;
        }

        echo '<tr>';


        for ($round = 1; $round <= $total_rounds; $round++) {

            echo '<td colspan="2"><strong>Round'.$round.'</strong></td>';

        }

        echo '</tr>';

        for ($row = 1; $row <= $max_rows; $row++) {

            echo '<tr>';

            for ($round = 1; $round <= $total_rounds; $round++) {
                $score_size = pow(2, $round)-1;
                if (is_player($round, $row, $team_array[$round])) {
                    $unpaired_array[$round] = !$unpaired_array[$round];
                    echo '<td>';
                    echo '<div class="input-group">';  
                    echo '<input  type="text" class="form-control" name="destinatario" placeholder="Por Clasificar" style="background-color:#6fa8dc;" disabled>';
                    echo '<div class="input-group-append">';
                    echo  '<span class="input-group-text" style="background-color:#cfe2f3;">-</span>';
                    echo '</div>';
                    echo '</div>';
                echo '</td>';
                    echo "\t\t<td width=\"20\">&nbsp;</td>\n";
                    $team_array[$round]++;
                    $score_array[$round] = False;
                } else {
                    if ($unpaired_array[$round] && $round != $total_rounds) {
                        if (!$score_array[$round]) {
                            echo "\t\t<td rowspan=\"$score_size\">Score</td>\n";
                            echo "\t\t<td rowspan=\"$score_size\" width=\"20\">$round</td>\n";
                            $score_array[$round] = !$score_array[$round];
                        }
                    } else {
                        echo "\t\t<td colspan=\"2\">&nbsp;</td>\n";
                    }
                }

            }

            echo "\t</tr>\n";

        }

        ?>

    </table>

</body>
</html>

Agradecería mucho la ayuda con este tema

5
  • Solo por si usás Bootstrap 5: ¿intentaste darle a la tabla las clases overflow-x-auto flex-nowrap?
    – padaleiana
    Commented el 12 jul. a las 23:44
  • Que no había respondido yo a una pregunta como esta? Hace solo unas horas... 🤔
    – OCHOA
    Commented el 13 jul. a las 9:13
  • @padaleiana acabo de probar con esas opciones y de igual forma no me funciono, lo que he podido hacer es darle un tamaño especifico al input style="width:210px; de esta forma, pero eso me lomita a que el tamaño sea fijo totalmente '<input type="text" class="form-control" name="destinatario" placeholder="Por Clasificar" style="width:210px; background-color:#6fa8dc;" disabled>' Commented el 13 jul. a las 18:17
  • @OCHOA en efecto había posteado este mismo caso, pero abrí un nuevo hilo con el código mas resumido a ver si se entiende mejor el caso. En este caso puedes copiar el código completo que posteé y te debe correr sin problema ya que no tiene variables externas. Hasta el momento no he podido solucionar correctamente, solo poniéndole un tamaño fijo al input como lo dije en el comentario anterior style="width:210px; , pero no se si es la forma correcta Commented el 13 jul. a las 18:21
  • @Programadorx eliminaste tu pregunta? No te importó que yo ya la había respondido? Que me había tomado el tiempo de recrear tu escenario para responderte??
    – OCHOA
    Commented el 15 jul. a las 12:57

1 respuesta 1

1

Básicamente lo que debes hacer es agregar un contenedor div con la clase table-responsive y poner toda tu tabla dentro.

<div class="table-responsive">
    <!--El código de la tabla-->
</div>

De esta manera tu tabla siempre mantendrá la barra de desplazamiento horizontal cuando supere las dimensiones de la pantalla. Así por ejemplo:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <h1>Tabla responsiva</h1>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
          <th>Head</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>

</html>

Si tienes dudas deja un comentario o si tu problema queda resuelto marca la pregunta con los botones que tienes al lado izquierdo de la respuesta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.