0

¿Por qué me pone los TR uno al lado del otro, cuando tendría que ponerse uno debajo del otro?

table,
th,
td {
  border: 1px solid black;
}
<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>col</th>
      <th>Año</th>
      <th></th>
      <th>Enero</th>
      <th>Diciembre</th>
      <th>Noviembre</th>
      <th>Octubre</th>
      <th>Septiembre</th>
      <th>Agosto</th>
      <th>Julio</th>
      <th>Junio</th>
      <th>Mayo</th>
      <th>Abril</th>
      <th>Marzo</th>
      <th>Febrero</th>
      <th>Enero</th>
    </tr>
  </thead>
  <tr>
    <td rowspan="3">prov</td>
    <td rowspan="3">2018</td>
    <td rowspan="3">
      Coste: <br> Stock: <br> valoracion: <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
  </tr>
  <tr>
    <td rowspan="3">prov</td>
    <td rowspan="3">2017</td>
    <td rowspan="3">
      Coste: <br> Stock: <br> valoracion: <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
    <td rowspan="3">
      123 <br> 321 <br> 231 <br>
    </td>
  </tr>
</table>

3
  • Tienes 15 cabeceras y 16 datos en la primera fila. Eso hace que se descomponga la tabla y ocurra lo que ves.
    – JDev
    Commented el 11 jul. 2018 a las 15:04
  • Hay 16 de cada una, cabeceras y datos...
    – Pavlo B.
    Commented el 11 jul. 2018 a las 15:05
  • Si, que pense que iba de Enero a diciembre
    – JDev
    Commented el 11 jul. 2018 a las 15:09

2 respuestas 2

2

Es por que el rowspan esta en 3 , creo que buscas esto no?.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>col</th>
      <th>Año</th>
      <th></th>
      <th>Enero</th>
      <th>Diciembre</th>
      <th>Noviembre</th>
      <th>Octubre</th>
      <th>Septiembre</th>
      <th>Agosto</th>
      <th>Julio</th>
      <th>Junio</th>
      <th>Mayo</th>
      <th>Abril</th>
      <th>Marzo</th>
      <th>Febrero</th>
      <th>Enero</th>
    </tr>
  </thead>
  <tr>
    <td rowspan="1">prov</td>
    <td rowspan="1">2018</td>
    <td rowspan="1">
      Coste: <br> Stock: <br> valoracion: <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
  </tr>
  <tr>
    <td rowspan="1">prov</td>
    <td rowspan="1">2017</td>
    <td rowspan="1">
      Coste: <br> Stock: <br> valoracion: <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
    <td rowspan="1">
      121 <br> 121 <br> 211 <br>
    </td>
  </tr>
</table>

<style type="text/css">
  table,
th,
td {
  border: 1px solid black;
}
</style>

1

Tener en cuenta que la etiqueta rowspan se utiliza para agrupar FILAS

Ejemplo:

introducir la descripción de la imagen aquí

Esta es nuestra tabla inicial, voy a aplicar rowspan="4" a la etiqueta td que tiene el contenido texto1, permitiendo de esa manera obtener el siguiente resultado,

introducir la descripción de la imagen aquí

podemos observar que ahora texto1 está ocupando 4 filas, por ende las otras etiquetas se desplazan a la derecha; para solucionar esto me tocará quitar texto8, texto12, texto16 para poder obtener un resultado como el siguiente:

introducir la descripción de la imagen aquí


Código de Ejemplo

<table border="1" cellpadding="3" cellspacing="0">
    <thead>
        <tr>
            <th>titulo1</th>
            <th>titulo2</th>
            <th>titulo3</th>
            <th>titulo4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">texto1</td>
            <td>texto2</td>
            <td>texto3</td>
            <td>texto4</td>
        </tr>
        <tr>
            <td>texto5</td>
            <td>texto6</td>
            <td>texto7</td>
            <td>texto8</td>
        </tr>
        <tr>
            <td>texto9</td>
            <td>texto10</td>
            <td>texto11</td>
            <td>texto12</td>
        </tr>
        <tr>
            <td>texto13</td>
            <td>texto14</td>
            <td>texto15</td>
            <td>texto16</td>
        </tr>      
    </tbody>
</table>

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.