Why in this code colspan is not working properly?

user_14902708 0
Viewed 50

I have a table according to below. The first row has defined two columns, one with colspan=4 and the others with colspan=1. and for second row, has defined three columns, one with colspan=2 colspan=2 and the last one with colspan=1., and for third row, has defined three columns, one with colspan=1 colspan=3 and the last one with colspan=1.
but it doesn't work properly like this: enter image description here

<!DOCTYPE html>
        <html>
        <head>
            <title></title>
        </head>
        <body>
        <table  border="1" align="center" width="20%" cellpadding="20px" style="border-collapse: collapse; text-align: center;">
            <tbody> 
            <tr>
                <td colspan="4">1</td>
                <td>2</td>  
            </tr>
            <tr>
                <td colspan="2">3</td>
                <td colspan="2">4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td colspan="3">7</td>
                <td>8</td>
            </tr>
        </tbody>
        </table> 
        </body>
        </html>

css html
3 Answers

colspan specifies the actual amount of columns to use, rather than virtual columns. In your table, you have only three actual columns.

The first row has two cells.

  1. Tries to span across four columns.
  2. Tries to span on 1 column. The result, in this case, is that the first cell will span across two columns (because it is the max amount it can), and the second cell will take precisely 1 column.

The second and the third row each have three cells. And each cell will receive the maximum amount of 1 column to span, no matter what you specified on the colspan attribute.

Consider adding more cells to the table, which should span correctly, but take in mind it will create an empty row.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <table border="1" align="center" width="20%" cellpadding="20px" style="border-collapse: collapse; text-align: center;">
    <thead  style="border-color: transparent; border-bottom-color: inherit;">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </thead>
    <tbody>
      <tr>
        <td colspan="4">1</td>
        <td>2</td>
      </tr>
      <tr>
        <td colspan="2">3</td>
        <td colspan="2">4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td colspan="3">7</td>
        <td>8</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

user_80311150 
 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <table  border="1" align="center" width="20%" cellpadding="20px" style="border-collapse: collapse; text-align: center;">
        <tbody>        
 <tr style="    border-color: transparent;
    border-bottom: #9a8d8d;">
            <td></td>            
<td></td>            
<td></td>
<td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="4">1</td>
            <td>2</td>  
        </tr>
        <tr>
            <td colspan="2">3</td>
            <td colspan="2">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td colspan="3">7</td>
            <td>8</td>
        </tr>
    </tbody>
    </table> 
    </body>
    </html>
user_52543110

It's wonderful! It works if you use another tr with 5 td inside that has border: none. Although maybe you don't want this:

 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        .hidden td{
          border: none;
        }
        </style>
    </head>
    <body>
    <table  border="1" align="center" width="20%" cellpadding="20px" style="border-collapse: collapse; text-align: center;">
        <thead>
          <tr class="hidden">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </thead>
        <tbody> 
        <tr>
            <td colspan="4">1</td>
            <td>2</td>  
        </tr>
        <tr>
            <td colspan="2">3</td>
            <td colspan="2">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td colspan="3">7</td>
            <td>8</td>
        </tr>
    </tbody>
    </table> 
    </body>
    </html>

user_170071840
Related