[Solved] Trouble creating row and column spans.

[Anonymous]

Greetings,

I am trying to create a single row in all of the rows that contain a year on this page using a reusable class=”year”. I’ve read about row and column spans and it all seems straight forward. However, when I try to span either, it creates an extra row or column, depending on which I’m trying to span, and a large area beneath is filled with the frame color.

What am I missing?

Best Regards.

[Paulie_D]

I’m not quite sure what it is you are trying to achieve.

Do you have an example of the intended layout?

[Anonymous]

Greetings Paulie,

I did a concept image of it which is here. I’m trying to get the areas where the year appears to appear as one single row. The final version will not show the table border at all is there only for place reference during the design. The final will look something like this except no image borders and no nested tables.

Best Regards.

[Paulie_D]

colspan is really only intended for th element inside a table header thead.

As you can see from : http://codepen.io/Paulie-D/pen/IvFHe if you apply it to a tr it does span 2 columns but it adds another column which you don’t want.

I don’t know how the information is being generated by to get the effect you are after you may have to use multiple tables, but, as I said, I’m no expert.

If you apply to the th you get this.

http://codepen.io/Paulie-D/pen/enkoj

[Anonymous]

Greetings Paulie,

I tried to adapt what you put with what I had already created so as to not have to start from scratch, but it’s not going well. I’ve tried to do a find and replace of the coding around the years on my page with your codepen demo. The first one replaces, but I get the same results as in my original post. If I replace any of the other years, most of the table disappears completely.

Why is the white broad border showing at the right and as an extra column?

Best Regards.

[Paulie_D]

I’m not sure exactly what you have copied but it looks like you haven’t quite got it right.

Each year will need to have it’s own table if you want the effect you seem to be after…at least as far as I can tell.

Each table will have a thead (which contains the ‘year’ textand a separatetbody` which has the month rows.

What you have is just one monster table with two tbody elements.

The structure for EACH table (remember, 1 per year) should be something like:

<table>

  </thead>
  <th colspan="2">1846</th>
</thead>
<tbody>
  <tr>
    <td>January</td>
    <td> </td>
  </tr>
  <tr>
    <td>February</td>
    <td> </td>
  </tr>
  <tr>
    <td>March</td>
    <td> </td>
  </tr>
  <tr>
    <td>April</td>
    <td> </td>
  </tr>
  <tr>
    <td>May</td>
    <td> </td>
  </tr>
  <tr>
    <td>June</td>
    <td> </td>
  </tr>
  <tr>
    <td>July</td>
    <td> </td>
  </tr>
  <tr>
    <td>August</td>
    <td> </td>
  </tr>
  <tr>
    <td>September</td>
    <td> </td>
  </tr>
  <tr>
    <td>October</td>
    <td> </td>
  </tr>
  <tr>
    <td>Novermber</td>
    <td> </td>
  </tr>
  <tr>
    <td>December</td>
    <td> </td>
  </tr>
 </tbody>
</table>

[Anonymous]

Greetings Paulie,

I thought I had found the problem as I had forgotten to change

  </tr>  

</table>

to

  </tr>
 </tbody>
</table>

at the end. I’ve added all the column span code and yet I’m still getting the mysterious 3rd column.

Best Regards.

[Anonymous]

Paulie,

Just to follow up: I did replace

 </tr>
 </tbody>

with

 </tr>
 </tbody>
</table>

  <table>

  </thead>

and it produced about 29 individual tables, each with the 3rd column.

Best Regards.

[Anonymous]

Greetings Paulie,

I figured out what was causing it. The extra <th></th>elements under the <th colspan="2"></th> elements was creating the extra column. I removed all of them and now it looks fine.

Unless there is another issue with this I’m not aware of, this can be marked as solved.

Thanks Paulie!

[Author]

Posts