0

enter image description here

I am not sure if I am repeating the question if yes guide to the right place :)

I am using Datatable and trying to implement Horizontal Scrolling from this link

https://datatables.net/examples/basic_init/scroll_x.html

I am having problems with the <thead> of my table. My <tbody> is centered but the <thead> is not, and I am unable to find where is the problem.

.opciones {
  margin-top: 122px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  /* Para permitir que se envuelvan a una nueva línea si el espacio es insuficiente */
  justify-content: space-around;
  color: white;
  background-color: #3080f3;
  border: 0px;
}

.tabla-pokedex {
  overflow-x: auto;
}

.tabla-pokedex table {
  background-color: white;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
}

.tabla-pokedex th,
td {
  padding: 20px;
}

.tabla-pokedex thead {
  background-color: #3080fe;
  border-bottom: 5px solid #224dc2;
  color: white;
}

.tabla-pokedex tbody tr:nth-child(even) {
  background-color: #c5c0c0;
}

.tabla-pokedex tr:hover {
  background-color: #71a4f7
}
<table id="pokedex">
  <thead>
    <tr>
      <th>Número Pokédex</th>
      <th>Nombre</th>
      <th>Tipo 1</th>
      <th>Tipo 2</th>
      <th>Región</th>
      <th>Pre-evolución</th>
      <th>Evolución</th>
    </tr>
  </thead>
  <?php
    require_once 'conect.php';
    $sql = "SELECT numero_pokedex, nombre, tipo1, tipo2,region,preevolucion,evolucion FROM pokemon";
    foreach ($db->query($sql) as $fila) {

      echo "<tr>";
      echo "<td>" . $fila['numero_pokedex'] . "</td>";
      echo "<td>" . $fila['nombre'] . "</td>";
      echo "<td>" . $fila['tipo1'] . "</td>";
      echo "<td>" . $fila['tipo2'] . "</td>";
      echo "<td>" . $fila['region'] . "</td>";
      echo "<td>" . $fila['preevolucion'] . "</td>";
      echo "<td>" . $fila['evolucion'] . "</td>";
      echo "</tr>";
    }
  ?>
</table>

I add an image to have a more visual scope on this problem.

I tried to change some aspects of my main.css by using Google dev tools since I am using BS5 (might be there the error). Before downloading the plugin I checked the BS5 version, just in case.

0

Browse other questions tagged or ask your own question.