- This topic is empty.
January 13, 2014 at 6:30 am #160248AnonymousInactive
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.January 13, 2014 at 6:40 am #160249
I’m not quite sure what it is you are trying to achieve.
Do you have an example of the intended layout?January 13, 2014 at 7:28 am #160254AnonymousInactive
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.January 13, 2014 at 8:10 am #160261
colspanis really only intended for
thelement inside a table header
As you can see from : http://codepen.io/Paulie-D/pen/IvFHe if you apply it to a
trit 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
thyou get this.January 13, 2014 at 9:13 am #160263AnonymousInactive
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.January 13, 2014 at 9:38 am #160265
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’ text
and a separatetbody` which has the month rows.
What you have is just one monster table with two
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>January 13, 2014 at 10:36 am #160278AnonymousInactive
I thought I had found the problem as I had forgotten to change
</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.January 13, 2014 at 10:57 am #160279AnonymousInactive
Just to follow up: I did replace
</tr> </tbody> </table> <table> </thead>
and it produced about 29 individual tables, each with the 3rd column.
Best Regards.January 13, 2014 at 11:38 am #160283AnonymousInactive
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.
- The forum ‘CSS’ is closed to new topics and replies.