Rowspan & Colspan issue when no unique rowspan

Question

With this code

<table border=1 cellpadding="30" height="300" width="100%">
        <tr>
            <td colspan="5" rowspan="3" >
            XXXX</td>
            <td colspan="2" rowspan="3" > 35</td>
        </tr>

        <tr> 
            <td  colspan="6" rowspan="2">
            YYYY</td>
            <td colspan="1" rowspan="2" >34</td>
        </tr>
</table>

I expect this kind of result

And I obtain

After long time focusing, I keep been lost.
Any specific point of html standard I miss about colspan / rowspan rules ?

Only way I found, but not acceptable in my app architecture is

<table border=1 cellpadding="10" cellspacing="0" >    
        <tr>
            <td width="0px"></td>
            <td colspan="5" rowspan="3" >
            XXXX</td>
            <td colspan="2" rowspan="3" > 35</td>
        </tr>
        <tr><td width=0></td></tr>
        <tr><td width=0></td></tr>
        <tr> 
            <td width=0></td>
            <td colspan="6" rowspan="2">
            YYYY</td>
            <td colspan="1" rowspan="2" >34</td>
        </tr>
        <tr><td width=0></td></tr>
</table>

=== EDIT ===

In fact, it's better understandable with the more complete following example

  <table width="800" border="1" cellpadding="5">
        <tbody>
          
            <tr role="row" class="even">
                <td>Line1</td>
                <td colspan="9">Lorem</td>
            </tr>
            <tr role="row" class="odd">
                <td rowspan="2">Line2</td>
                <td rowspan="2">Lorem</td>
                <td rowspan="2">Lorem</td>
                <td rowspan="2">Lorem</td>
                <td rowspan="2">Lorem</td>
                <td rowspan="2" colspan="5">Lorem</td>
            </tr>
            <tr role="row" class="odd">
                <td>Line3</td>
                <td colspan="4">Lorem</td>
                <td colspan="5">Lorem</td>
            </tr>
            <tr role="row" class="even">
                <td>Line4</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
            </tr>
           
        </tbody>
    </table>

It gives me

When I expect this

[this might help](https://stackoverflow.com/questions/5938099/html-table-cell-width-for-different-rows) — InspectorGadget, Jan 12 '21 at 15:46
Why are you using rowspan? Seems like you just want to set the height of the rows to 3x or 2x, you shouldn’t be using rowspan for that. — andrewtweber, Mar 29 '21 at 16:33
The first thing to note is your table is not valid HTML5. As such, while the HTML spec still describes how to form it, it's unlikely to construct it the way you intend. Are you looking for an explanation of why the "algorithm for processing rows" adds the cells to the end of an existing row rather than starting a new row? — Alohci, Apr 04 '21 at 21:07

score 1 · Answer 1 · answered Mar 30 '21 at 11:55

1

One way is to add empty <tr></tr>

<table border=1 cellpadding=30 width=100% cellspacing=10>
<tbody>
  <tr>
    <td colspan="5" rowspan="3">1</td>
    <td colspan="3" rowspan="3">2</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td colspan="6" rowspan="2">3</td>
    <td colspan="2" rowspan="2">4</td>
  </tr>
  <tr>
  </tr>
</tbody>
</table>

answered Mar 30 '21 at 11:55

Victor David

157
7

I guess, that's unwanted behavior. Because it fixes one bug and creates a new one. Additionally, based on how huge the difference between the rowspans per line is, you might have to add **a lot** of rows. – shaedrich Mar 30 '21 at 12:48
What is the new bug created ? – Victor David Mar 30 '21 at 12:57
Empty Rows. They are unwanted. It doesn't look as bad in the original example but the columns that should be _next_ to each other still are shifted due to the empty line. – shaedrich Mar 30 '21 at 12:58

score 0 · Answer 2 · answered Jan 12 '21 at 16:05

0

refers to this comment, i made you the below snippet

<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col  width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="10%">
</colgroup>

    <tr>
        <td colrow="2" colspan="3"><p>XXX</p><h2> </h2></td>
        <td colrow="2" colspan="2">35</td>     
    </tr>
    <tr>
        <td colrow="2" colspan="4"><p>YYYY</p><h2> </h2></td>
        <td colrow="2" colspan="1">34</td>

    </tr>
</table>

answered Jan 12 '21 at 16:05

Burham B. Soliman

1,380
1
9
13

I see you've replaced rowspan by colrow which is not a valid html attribute, isn't it ? – Damien C Mar 29 '21 at 15:00
About rowspan : your example works with ```colgroup``` with rowspan always the same for whole line => but it does not work if I need also rowspan with different values, depending on columns – Damien C Mar 29 '21 at 15:01

Filip Huhta · Answer 3 · 2021-03-29T16:44:28.267

0

Is this what you wanted to achieve with rowspan and colspan? Hope it was to any help.

<table border=1 cellpadding="10" cellspacing="0" >    
        <tr height="80" >
            <td  width="70%"colspan="5" rowspan="1"  >
            XXXX</td>
            <td width="30%" colspan="2" rowspan="1" > 35</td>
        </tr>

        <tr height="50"> 
            <td width="80%" colspan="6" rowspan="2" >
            YYYY</td>
            <td width="20%" colspan="1" rowspan="2">34</td>
        </tr>
</table>

edited Mar 29 '21 at 16:44

answered Mar 29 '21 at 16:29

Filip Huhta

2,043
7
25

Hi Filip. Unfortunately, in my app context, I can not set static width – Damien C Mar 30 '21 at 10:03

score 0 · Answer 4 · answered Mar 29 '21 at 17:50

0

    <table border="1" cellpadding="10" cellspacing="0" >    
   <tr>
    <th colspan="10">XXXX</th>

    <th colspan="7">35</th>
   </tr>
   <tr>
    <th colspan="14">YYYY</th>

    <th colspan="8">34</th>
   </tr>
  </table>

Output is given below:

Logically change the value of the colspan of the two rows. They must be related. You cant add a number randomly

answered Mar 29 '21 at 17:50

shamnad sherief

552
5
17

Shammad, OK But why rowspan do not works . I do need rowspan in some cases. – Damien C Mar 30 '21 at 10:04
Add more rows and create a big table. U will understand. Thank you – shamnad sherief Mar 30 '21 at 12:43

TRK · Answer 5 · 2021-03-30T14:39:00.787

You can achieve your expected result by only using colspan so you don't need to use rowspan here.

<table border=1 cellpadding="30" width="100%">
  <tr>
    <td colspan="5">XXXX</td>
    <td colspan="3"> 35</td>
  </tr>

  <tr>
    <td colspan="6">YYYY</td>
    <td colspan="2">34</td>
  </tr>
</table>

As per your updated question changes should be like:

Just remove rowspan and you will get your expected result as rowspan will use to merge rows and here you only required column merge.

<table width="800" border="1" cellpadding="5">
  <tbody>

    <tr role="row" class="even">
      <td>Line1</td>
      <td colspan="9">Lorem</td>
    </tr>
    <tr role="row" class="odd">
      <td>Line2</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td colspan="5">Lorem</td>
    </tr>
    <tr role="row" class="odd">
      <td>Line3</td>
      <td colspan="4">Lorem</td>
      <td colspan="5">Lorem</td>
    </tr>
    <tr role="row" class="even">
      <td>Line4</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>

  </tbody>
</table>

Shammad, OK But why rowspan do not works. It should do, no ? I do need rowspan in some cases — Damien C, Mar 30 '21 at 10:04
@DamienC, again you have used rowspan wrong. Just remove rowspan and you will get your expected result. Rowspan will merge rows and as per your requirement only colspan is required — TRK, Mar 30 '21 at 14:31

score 0 · Answer 6 · answered Mar 30 '21 at 11:57

I think I got the point ! ⭐

It's related to rowspan value. On line 2, each <td> is provided with rowspan=2 value.

Web Browsers seems to not understand this case. If I just remove this rowspan, it works.

    <table width="800" border="1" cellpadding="5">
        <tbody>
          
            <tr role="row" class="even">
                <td>Line1</td>
                <td colspan="9">Lorem</td>
            </tr>
            <tr role="row" class="odd">
                <td >Line2</td>
                <td >Lorem</td>
                <td >Lorem</td>
                <td >Lorem</td>
                <td >Lorem</td>
                <td colspan="5">Lorem</td>
            </tr>
            <tr role="row" class="odd">
                <td>Line3</td>
                <td colspan="4">Lorem</td>
                <td colspan="5">Lorem</td>
            </tr>
            <tr role="row" class="even">
                <td>Line4</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
            </tr>
           
        </tbody>
    </table>

The bad news is that it's hard on my app to just remove this. (it's based on a excel file source). So, I've written this small vanilla JS script to fix all rowspan & colspan mix.

But I found this a bit messy :-/

let rows = Object.values(document.querySelectorAll("table tr"));
        for (var tdIdx in rows) {
            var tds = Object.values(rows[tdIdx].children);
            var fRowspan = tds[0].rowSpan;
            if (fRowspan > 1 && tds.filter(td => td.rowSpan !== fRowspan).length === 0) {
                // Si on a un rowspan toujours égal à la même valeur, alors on le supprime
                tds.forEach(td => td.rowSpan = 1);
                // Change le rowspan des lignes précédentes
                let colspanDiff = fRowspan - 1;
                let previousLines = 0;
                while((tdIdx - ++previousLines) >= 0) {
                    Object.values(rows[tdIdx - previousLines].children)
                        .filter(td =>  td.rowSpan != null && td.rowSpan > previousLines)
                        .forEach(td => td.rowSpan --);
                    colspanDiff --;
                }
            }
        }

 
    <table width="800" border="1" cellpadding="5">
        <tbody>
            <tr role="row" class="even">
                <td rowspan="3">Line1</td>
                <td colspan="9">Lorem</td>
            </tr>
            <tr role="row" class="odd">
                <td rowspan="2" >Lorem</td>
                <td rowspan="2" >Lorem</td>
                <td rowspan="2" >Lorem</td>
                <td rowspan="2" >Lorem</td>
                <td rowspan="2" colspan="5">Lorem</td>
            </tr>
            <tr role="row" class="odd">
                <td>Line3</td>
                <td colspan="4">Lorem</td>
                <td colspan="5">Lorem</td>
            </tr>
            <tr role="row" class="even">
                <td>Line4</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
                <td>Lorem</td>
            </tr>
           
        </tbody>
    </table>

Rowspan & Colspan issue when no unique rowspan

6 Answers6