css colgroup

Door Jan R op 03-10-2025 10:08 gewijzigd op 03-10-2025 10:13

1.182 views

Hoi

Ik wil een border rond 3 kolommen maar enkel in de header. Nu doet hij de gehele kolom


colgroup.bordergreen {
    border: 5px solid green;
}
colgroup.borderblue {
    border: 5px solid blue;
}

<table class="noborder sortable nowrap">
    <thead>
        <colgroup span="4">
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <colgroup span="3" class="bordergreen">
            <col>
            <col>
            <col>
        </colgroup>
        <col>
        <colgroup span="3" class="borderblue">
            <col>
            <col>
            <col>
        </colgroup>
        <col>
    <tr>
        <th class="sorttable_nosort"></th>
        <th class="sorttable_nosort"></th>
        <th>Voornaam</th>
        <th>Naam</th>
        <th data-fide>Aangesloten</th>
        <th data-fide>FIDE nummer</th>
        <th data-fide>FIDE ELO</th>
        <th>Opmerking</th>
        <th data-punten>Extra Punten</th>
        <th data-punten>Extra weerstandpunten</th>
        <th data-punten>Extra winstpunten</th>
        <th class="sorttable_nosort"></th>
    </tr>
    </thead>
    <tbody>
        <tr>col1</tr>
        <tr>col2</tr>
        ...
        <tr>col12</tr>        
    </tbody>
</table>

Als ik er thead voor zet dan doet hij niets.

Jan

Ivo P

03-10-2025 12:07

Is het dan niet logischer om CSS op de TH elementen te laten werken?

[size=xsmall]Toevoeging op 03/10/2025 12:13:57:[/size]

Ik zie nu dat je de border om meerdere kolommen wilt hebben.

in dat geval zou ik denken aan een


<th class="bordergreen left">
<th class="bordergreen mid">
<th class="bordergreen mid">
<th class="bordergreen right">


th.bordergreen {
    border-color: green;
}
th.left {
    border-bottom: 5px solid;
    border-top: 5px solid;
    border-left: 5px solid;
    border-right: 0;
}

of misschien


th.bordergreen {
    border: 5px solid green;
}
th.left {
    border-right: 0;
}

Jan R

03-10-2025 16:50

Ik heb het werkende gekregen.
Bedankt alweer voor de hulp:).

Reageren

Inloggen om te reageren