CODEWITHSUNDEEP
htmlcsshtml-table
Max
Max

Reputation: 125

rowspan height/width issue for html

I am using simple HTML with table and in chrome I have problem with height but in firefox it is working fine.

Here is the HTML and JsFiddle

<!DOCTYPE html>
<html>
   <head>
      <style>
         table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 100%;
         }
         td, th {
         border: 1px solid #dddddd;
         text-align: left;
         }
      </style>
   </head>
   <body>
      <h2>HTML Table</h2>
      <table>
         <tbody>                        
            <tr>
               <td rowspan="3">
                  Hello World                                                                            
               </td>
            </tr>
            <tr>
               <td>some</td>
               <td >some</td>
               <td >some</td>
               <td >some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
            </tr>
            <tr>
               <td>some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
            </tr>
            <tr>
               <td rowspan="3">
                  <b>LOREM</b>
                  <br>IPSUM<br>IP<br> LOREM<br>IP IPSUM<br>IP LORM <br>IP  IPSUM<br>IP LORAM                                                                                                    
               </td>
            </tr>
            <tr>
               <td>some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
            </tr>
            <tr>
               <td>some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
               <td > some</td>
            </tr>            
         </tbody>
      </table>
   </body>
</html>

Screenshot of chrome (as you can see it is not align)

enter image description here

Screenshot of firefox(as you can see it is proper align)

enter image description here

I tried with height, width but still it is not working in chrome, can anyone help me what's wrong with this?

Upvotes: 0

Views: 972

Answers (2)

Johannes
Johannes

Reputation: 67768

You have a <td rowspan="3">and you close the tr tag directly after that. That would be only one cell in that row which spans 3 rows, which in this context does not make sense.

The cell (td) that spans three rows is the first cell in the first row, followed by 13 more cells in the same row (that's where your error is). The second and third row each contain 13 cells, since the first cell (spanning three rows) is already defined in the first row/line.

I suppose you want it as follows, that first cell with rowspan = "3" being in one row with the first line of "regular cells, and same for the 4th line:

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
    }
  </style>
</head>

<body>
  <h2>HTML Table</h2>
  <table>
    <tbody>
      <tr class="even">
        <td rowspan="3">
          Hello World
        </td>
        <td>some</td>
        <td>some</td>
        <td>some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
      </tr>
      <tr>
        <td>some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
      </tr>
      <tr>
        <td>some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
        <td> some</td>
      </tr>
      <tr>
        <tr>

          <td rowspan="3">
            <b>LOREM</b>
            <br>IPSUM<br>IP<br> LOREM<br>IP IPSUM<br>IP LORM <br>IP IPSUM<br>IP LORAM
          </td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
        </tr>
        <tr>
          <td>some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
        </tr>
        <tr>
          <td>some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
          <td> some</td>
        </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 2

Moritz
Moritz

Reputation: 23

Sooo. I took your code and played a bit with it.

I dont know why but when you add one more "some" to one of the last two tr's then it looks like this:

example

Upvotes: 0

Related Questions