html 表中的列周围的边框，其中某些行具有 collspan

Question

I have an HTML table displaying a calendar. People are divided in groups. The names of the groups can be very long.

Two requirements:

1. Don't let the name of the group (in the screenshot 'The name of a group can be very long') have any influence on the width of the columns with the names.
2. A border should be drawn around the complete column that is "today".

For requirement 1, I simply set a colspan on the td containing the name of the group.

<td colspan="31">The name of a group can be very long</td>

For requirement 2, I set a border on the correct column in the columngroup .

<colgroup>
   <col>
   <col>
   <col>
   <col class="planningtable_todaycolumn">
</colgroup>

Now the issue is that the border breaks on the group rows, instead of just continuing.

How can I fix this? I have been looking into fixing problem 1 in another way than using a colspan . Because when I'm not using a colspan the issue is solved automatically. But I could not find usable solutions.

Also been thinking about another way to draw the border. But in the group row, there is no element to give a border, so I have no idea how to fix that.

Answer 1

By reading the link @Bobtroopo provided I came up with a solution:

Don't use a colspan for the group cells.

But give them a position style:

position: absolute