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.