Problem with table in html

Navigation
0

Why do you put the TRs next to each other? when you would have to put one under the other 

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>
    
asked by Pavlo B. 11.07.2018 в 16:59
source

2 answers

1

Keep in mind that the rowspan tag is used to group ROWS

Example:

this is our initial table, I'm going to apply rowspan="4" to the label td that has the content texto1 , allowing in that way to obtain the following result,

we can see that now texto1 is occupying 4 rows, therefore the other labels move to the right, to solve this I will remove remove texto8 , texto12 , texto16 to get a result like next.

I hope it's useful,

Greetings,

Bryan Condor

Sample Code 

<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>
    
answered by 11.07.2018 / 18:01
source
1

It's because the rowspan is in 3, I think you're looking for this, do not you? 

<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>
    
answered by 11.07.2018 в 17:24
How to validate a switch (materialize) with jquery? Redirection 301 friendly url