Skip to main content
se eliminaron 6 caracteres en el cuerpo
Origen Enlace
user128299
user128299

Tu problema parece resolversese resuelve con el hecho de eliminar esta regla CSS:

thead, tbody { display: block; }

Considera el siguiente ejemplo el cual es una estructura de tabla HTML básica y sin estilos CSS definidos por mi:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo</title>
  <style>

  </style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elemento Uno</td>
      <td>Elemento tres</td>
    </tr>
    <tr>
      <td>Elemento Dos</td>
      <td>Elemento Cuatro</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Es importante aclarar que la estructura de tablas construidas por la etiqueta padre table en HTML tiene un display de tipo table como lo puedes apreciar en la siguiente imagen si inspeccionas a dicho elemento:

introducir la descripción de la imagen aquí

Considera que:

  • Un display de tipo block hará que los elementos ocupen el ancho máximo disponible, generando un acomodo uno sobre el otro de cada elemento que sea de esta naturaleza o sea declarado así.1
  • Un display de tipo table hace a los elementos acomodarse como una tabla generando un arreglo en 2 dimensiones deacuerdo con la Mozilla Developer2.

Dado lo anterior esa regla que tenías generaba que se descuadrara tu maquetación

Referencias

Tu problema parece resolverse con el hecho de eliminar esta regla CSS:

thead, tbody { display: block; }

Considera el siguiente ejemplo el cual es una estructura de tabla HTML básica y sin estilos CSS definidos por mi:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo</title>
  <style>

  </style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elemento Uno</td>
      <td>Elemento tres</td>
    </tr>
    <tr>
      <td>Elemento Dos</td>
      <td>Elemento Cuatro</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Es importante aclarar que la estructura de tablas construidas por la etiqueta padre table en HTML tiene un display de tipo table como lo puedes apreciar en la siguiente imagen si inspeccionas a dicho elemento:

introducir la descripción de la imagen aquí

Considera que:

  • Un display de tipo block hará que los elementos ocupen el ancho máximo disponible, generando un acomodo uno sobre el otro de cada elemento que sea de esta naturaleza o sea declarado así.1
  • Un display de tipo table hace a los elementos acomodarse como una tabla generando un arreglo en 2 dimensiones deacuerdo con la Mozilla Developer2.

Dado lo anterior esa regla que tenías generaba que se descuadrara tu maquetación

Referencias

Tu problema se resuelve con el hecho de eliminar esta regla CSS:

thead, tbody { display: block; }

Considera el siguiente ejemplo el cual es una estructura de tabla HTML básica y sin estilos CSS definidos por mi:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo</title>
  <style>

  </style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elemento Uno</td>
      <td>Elemento tres</td>
    </tr>
    <tr>
      <td>Elemento Dos</td>
      <td>Elemento Cuatro</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Es importante aclarar que la estructura de tablas construidas por la etiqueta padre table en HTML tiene un display de tipo table como lo puedes apreciar en la siguiente imagen si inspeccionas a dicho elemento:

introducir la descripción de la imagen aquí

Considera que:

  • Un display de tipo block hará que los elementos ocupen el ancho máximo disponible, generando un acomodo uno sobre el otro de cada elemento que sea de esta naturaleza o sea declarado así.1
  • Un display de tipo table hace a los elementos acomodarse como una tabla generando un arreglo en 2 dimensiones deacuerdo con la Mozilla Developer2.

Dado lo anterior esa regla que tenías generaba que se descuadrara tu maquetación

Referencias

Origen Enlace
user128299
user128299

Tu problema parece resolverse con el hecho de eliminar esta regla CSS:

thead, tbody { display: block; }

Considera el siguiente ejemplo el cual es una estructura de tabla HTML básica y sin estilos CSS definidos por mi:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo</title>
  <style>

  </style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elemento Uno</td>
      <td>Elemento tres</td>
    </tr>
    <tr>
      <td>Elemento Dos</td>
      <td>Elemento Cuatro</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Es importante aclarar que la estructura de tablas construidas por la etiqueta padre table en HTML tiene un display de tipo table como lo puedes apreciar en la siguiente imagen si inspeccionas a dicho elemento:

introducir la descripción de la imagen aquí

Considera que:

  • Un display de tipo block hará que los elementos ocupen el ancho máximo disponible, generando un acomodo uno sobre el otro de cada elemento que sea de esta naturaleza o sea declarado así.1
  • Un display de tipo table hace a los elementos acomodarse como una tabla generando un arreglo en 2 dimensiones deacuerdo con la Mozilla Developer2.

Dado lo anterior esa regla que tenías generaba que se descuadrara tu maquetación

Referencias