Hoe tabel lay-out universeel maken (voor de meeste browsers)

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
De lay-out van een tabel verschijnt (zoals ik ze voorzag) in edge maar niet in chrome
- gesplitste titelvelden komen correct onder elkaar in edge (om horizontaal ruimte te sparen)
VB in- ver-
koop koop ....
maar naast elkaar in chrome als : in-koop ver-koop ...

- alle cellen zijn al dan niet voorzien van randen met code in de trant van :
<td width="20" align="right" style="border-left: 1 solid #C0C0C0; border-right: none; border-top: 1 solid #C0C0C0; border-bottom: 1 solid #C0C0C0"><font face="Arial" size="2">

in edge krijg ik de perfecte grijze (of géén) randen waar ik het wil - in chrome wordt geen enkele rand (raster) weergegeven

Ik vermoed dat CSS hiervoor een oplossing kan bieden - mijn probleem is nog dat ik dat niet zo onder de knie heb.

Graag zou ik met een voorbeeld zien hoe ik dit kan aanpakken.
Dank.
 
Heb je een voorbeeld in jsfiddle?
 
jsfiddle is mij niet bekend. Wat kan de meerwaarde zijn ? Hoe te gebruiken ?
 
Je kan hiermee verder denk ik. Dit is een korte vereenvoudigde versie van Bootstrap.
Code:
HTML

<div class="table-responsive">
    <table class="table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Voornaam</th>
                <th>achternaam</th>
                <th>Leeftijd</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Piet</td>
                <td>Jansen</td>
                <td>32 jaar</td>
            </tr>
            <tr>
                <td>Marie</td>
                <td>Verdoorn</td>
                <td>24 jaar</td>
            </tr>
            <tr>
                <td>Jeroen</td>
                <td>Doormans</td>
                <td>29 jaar</td>
            </tr>
            <tr>
                <td>Saskia</td>
                <td>Vermeer</td>
                <td>27 jaar</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table,
table * {
    box-sizing:border-box;
}
table {
    width:100%;
    max-width:100%;
    border-spacing:0;
    border-collapse:collapse;
    background-color:transparent;
}
table th,
table td {
    padding:8px;
    line-height:1.4;
    vertical-align:top;
    border-top:1px solid #ddd;
}
table th {
    text-align:left;
    vertical-align:bottom;
    border-bottom:2px solid #ddd;
}
table tr:first-child th,
table tr:first-child td {
    border-top:0;
}
.table-bordered {
    border:1px solid #ddd;
}
.table-bordered th,
.table-bordered td {
    border:1px solid #ddd;
}
.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width:1px;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color:#f9f9f9;
}
.table-hover tbody tr:hover {
    background-color:#f5f5f5;
}
.table-responsive {
    min-height:.01%;
    overflow-x:auto;
}
@media screen and (max-width:767px) {
    .table-responsive {
        width:100%;
        border:1px solid #ddd;
        box-sizing:border-box;
        overflow-y:hidden;
        -ms-overflow-style:-ms-autohiding-scrollbar;
    }
    .table-responsive table {
        margin-bottom:0;
    }
    .table-responsive table td,
    .table-responsive table th {
        /*volgende regel weg als je collapse wilt op phone*/
        white-space:nowrap;
    }
    .table-responsive .table-bordered {
        border:0;
    }
    .table-responsive .table-bordered tr td:first-child,
    .table-responsive .table-bordered tr th:first-child {
        border-left:0;
    }
    .table-responsive .table-bordered tr td:last-child,
    .table-responsive .table-bordered tr th:last-child {
        border-right:0;
    }
    .table-responsive .table-bordered tbody tr:last-child td,
    .table-responsive .table-bordered tbody tr:last-child th {
        border-bottom:0;
    }
}
@media print {
    thead {
        display:table-header-group;
    }
    tr {
        page-break-inside:avoid;
    }
    table {
        border-collapse:collapse !important;
    }
    table th,
    table td {
        background-color:#fff !important;
    }
    .table-bordered th
    .table-bordered td {
        border:1px solid #ddd !important;
    }
}
De css is geschikt voor desktop, tablet, smartphone en printer.
Standaard heeft de tabel alleen horizontale lijnen.

Optioneel zijn deze class'es (in de table tag)
table-bordered : geeft elke cel een lijn rondom
table-striped : geeft achtergrondkleur in oneven rijen
table-hover : geeft mouse-over kleur bij een rij.

* als aanvulling op je vraag zet je jouw styling onderaan de css
Code:
table th,
table td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-color: #c0c0c0;
}
/*hieronder per kolom een opmaak geven*/
table td:nth-child(1),
table th:nth-child(1) {
    width: 15%;
    text-align: left;
}
table td:nth-child(2),
table th:nth-child(2) {
    width: 35%;
    text-align: left;
}
table td:nth-child(3),
table th:nth-child(3) {
    width: 50%;
    text-align: right;
}
Suc6. Have fun.
 
Laatst bewerkt:
Dank bron, met dit voorbeeld kan ik inderdaad aan de slag.

Voorlopig nog 2 probleempjes
- hoe bekom ik een splitsing van de tabeltitels over twee rows (in het voorbeeld 'voor-naam' of 'achter-naam' of 'leef-tijd' dus op de 1e row : voor- achter- leef- en op 2de row onmiddellijk eronder : naam naam tijd) ?
- hoe kan ik bepaalde celranden weglaten (=blanco laten) - bijvoorbeeld de horizontale rand tussen de leeftijd van Marie en Jeroen, of andere ?

Dank.
 
Laatst bewerkt:
Aangepast voorbeeld. Probeer het even en bekijk dan het resultaat en de css.
Code:
HTML

<div class="table-responsive">
    <table class="table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th colspan="2">Voor-<br />achternaam</th>
                <th>Leeftijd</th>
            </tr>
        </thead>
        <tbody>
            <tr class="merge-vert">
                <td>Piet</td>
                <td>Jansen</td>
                <td>32 jaar</td>
            </tr>
            <tr>
                <td>Marie</td>
                <td>Verdoorn</td>
                <td>24 jaar</td>
            </tr>
            <tr>
                <td>Jeroen</td>
                <td>Doormans</td>
                <td class="merge-vert">29 jaar</td>
            </tr>
            <tr>
                <td class="merge-hor">Saskia</td>
                <td>Vermeer</td>
                <td>27 jaar</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

/* algemene tabel opmaak */
table th,
table td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-color: #c0c0c0;
}
/* hoogte titel (zie uitleg) */
table th {
    min-height: 55px;
}
/* titel rij gebruikt hier de colspan) */
table th:first-child {
    width: 50%;
    text-align: left;
}
table th:last-child {
    width: 50%;
    text-align: right;
}
/* data cellen opmaak */
table td:nth-child(1) {
    width: 15%;
    text-align: left;
}
table td:nth-child(2) {
    width: 35%;
    text-align: left;
}
table td:nth-child(3) {
    width: 50%;
    text-align: right;
}
/* rijen of cellen verticaal optisch samenvoegen */
table tr td.merge-vert,
table tr.merge-vert td {
    border-bottom-color:transparent;
}
/* cellen horizontaal optisch samenvoegen */
table tr td.merge-hor {
    border-right-color:transparent;
}
Uitleg min-height: 55px;
De hoogte van 1 tekstregel is 14px (font-size) x 1.4 (line-height) = 19.6px
2 regels hebben dus een hoogte van 2x 19.6 = 39px (afgerond)
Elke cel heeft ook nog boven en onder een padding van 8px, in totaal 16px.
Tel alles op en je hebt 55px.

Opmerking.
Google even naar (html) rowspan=".." en colspan="..".
Persoonlijk raad ik dit sterk af omdat de html een onoverzichtelijke rijstebrij wordt.
In het voorbeeld hierboven heb ik een eenvoudige vorm daarvan toegepast.

* noot:
table th { min-height: 55px; } hoeft eigenlijk niet omdat er een <br /> in de titel staat maar ik heb het toegevoegd voor consistentie zodat de titelbalk altijd minimaal 2 regels hoog is.

Suc6. Have fun.
 
Laatst bewerkt:
Dank voor de aanvullende voorbeelden.
=> splitsing titels is daarmee opgelost (met BR-tag)

'spelen' met celranden (weglaten - eventueel ander kleur - etc) heb ik nog niet begrepen.
=> De tabel van de laatste voorbeeldcode (dd. 07/07) heeft geen randen
Als ik dan in onderstaande code 'transparent' vervang door bijvoorbeeld 'red', dan zou ik een rode rand verwachten ?

/* rijen of cellen verticaal optisch samenvoegen */
table tr td.merge-vert,
table tr.merge-vert td {
border-bottom-color:transparent;

=> ik zie dat voor elke row de code 'child' gebruikt wordt
als er bijvoorbeeld 50 rijen in de tabel zijn => moet de code dan herhaald worden als : table td:nth-child(1) { tot ... nth-child(48) ?

=> hoe bekom ik de lay-out van de eerste tabel dd. 07/07 ook in de laatste tabel ? is dat combineerbaar met de code 'nth-child()' ?
met lay-out bedoel ik o.a. :
Optioneel zijn deze class'es (in de table tag)
table-bordered : geeft elke cel een lijn rondom
table-striped : geeft achtergrondkleur in oneven rijen
table-hover : geeft mouse-over kleur bij een rij.

De opeenvolging van class-combinaties en de correcte 'aanroeping' ervan in HTML zijn mij nog niet zo heel duidelijk.
Bijvoorbeeld 'table-bordered e.a.

Dank voor toelichting (en ... geduld - sorry)
 
Laatst bewerkt:
Oops, niet goed aangegeven dat je de css van beide berichtjes moet samenvoegen. Hieronder staat alles bij elkaar met kleine wijzigingen.
Code:
HTML

<div class="table-responsive">
<table class="table-bordered table-striped table-hover">
<thead>
    <tr>
        <th>Voor-<br />naam</th>
        <th>Achter-<br />naam</th>
        <th>Leeftijd</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="rand">Piet</td>
        <td>Jansen</td>
        <td>32 jaar</td>
    </tr>
    <tr>
        <td>Marie</td>
        <td>Verdoorn</td>
        <td class="rand merge-vert">24 jaar</td>
    </tr>
    <tr>
        <td>Jeroen</td>
        <td>Doormans</td>
        <td class="rand">29 jaar</td>
    </tr>
    <tr>
        <td class="rand merge-hor">Saskia</td>
        <td class="rand">Vermeer</td>
        <td>27 jaar</td>
    </tr>
</tbody>
</table>
</div>

CSS

/*---START: NIET WIJZIGEN---*/
table,
table * {
    box-sizing:border-box;
    margin:0;
    padding:0;
}
table {
    width:100%;
    max-width:100%;
    border-spacing:0;
    border-collapse:collapse;
    background-color:transparent;
}
table th,
table td {
    padding:8px;
    line-height:1.4;
    vertical-align:top;
    border-top:1px solid #ddd;
}
table th {
    text-align:left;
    vertical-align:bottom;
    border-bottom:2px solid #ddd;
}
table tr:first-child th,
table tr:first-child td {
    border-top:0;
}
.table-bordered {
    border:1px solid #ddd;
}
.table-bordered th,
.table-bordered td {
    border:1px solid #ddd;
}
.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width:1px;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color:#f9f9f9;
}
.table-hover tbody tr:hover {
    background-color:#f5f5f5;
}
.table-responsive {
    min-height:.01%;
    box-sizing:border-box;
    overflow-x:auto;
    padding: 1px;
}
@media screen and (max-width:767px) {
    .table-responsive {
        width:100%;
        border:1px solid #ddd;
        box-sizing:border-box;
        overflow-y:hidden;
        -ms-overflow-style:-ms-autohiding-scrollbar;
    }
    .table-responsive table {
        margin-bottom:0;
    }
    .table-responsive table td,
    .table-responsive table th {
        /*volgende regel weg als je collapse wilt op smartphone*/
        white-space:nowrap;
    }
    .table-responsive .table-bordered {
        border:0;
    }
    .table-responsive .table-bordered tr td:first-child,
    .table-responsive .table-bordered tr th:first-child {
        border-left:0;
    }
    .table-responsive .table-bordered tr td:last-child,
    .table-responsive .table-bordered tr th:last-child {
        border-right:0;
    }
    .table-responsive .table-bordered tbody tr:last-child td,
    .table-responsive .table-bordered tbody tr:last-child th {
        border-bottom:0;
    }
}
@media print {
    thead {
        display:table-header-group;
    }
    tr {
        page-break-inside:avoid;
    }
    table {
        border-collapse:collapse !important;
    }
    table th,
    table td {
        background-color:#fff !important;
    }
    .table-bordered th
    .table-bordered td {
        border:1px solid #ddd !important;
    }
}
/*---EINDE: NIET WIJZIGEN---*/

/*---START: JOUW VORMGEVING---*/
table th,
table td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-color: #c0c0c0;
}
/*vormgeving header*/
table th {
    color: #00c;
    text-align: left;
}
table th:last-child {
    color: #00c;
    text-align: right;
}
/*vormgeving data kolommen*/
table td:nth-child(1) {
    width: 15%;
    text-align: left;
}
table td:nth-child(2) {
    width: 35%;
    text-align: left;
}
table td:nth-child(3) {
    width: 50%;
    text-align: right;
}
/*randen smartphone*/
@media screen and (max-width:767px) {
    .table-responsive {
        border: 0;
    }
    .table-responsive .table-bordered {
        border: 1px solid #ddd;
    }
    .table-responsive .table-bordered tr td.rand:first-child {
        border-left: 2px solid #bbf;
    }
    .table-responsive .table-bordered tr td.rand:last-child {
        border-right: 2px solid #bbf;
    }
    .table-responsive .table-bordered tbody tr:last-child td.rand {
        border-bottom: 2px solid #bbf;
    }
}
/*randen*/
table tr td.rand {
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-style: solid;
    border-color: #bbf;
}
/* cellen verticaal optisch samenvoegen */
table tr td.merge-vert {
    border-bottom-color: transparent !important;
}
/* cellen horizontaal optisch samenvoegen */
table tr td.merge-hor {
    border-right-color: transparent !important;
}
/*---EINDE: JOUW VORMGEVING---*/
Bij <td class="..."> kan je "rand" of "merge-hor" of "merge-vert" invullen. Je mag rand ook combineren met merge-hor of merge-vert. Bekijk de code van hierboven en speel er wat mee.

RE: 'spelen' met celranden
Dit doe je met <td class="rand"> , zie hierboven.

RE: moet de code dan herhaald worden als table td:nth-child(1) tot ... nth-child(48) ?
Nee, nth-child wordt gebruikt voor kolommen (van links naar rechts) zodat je elke kolom een eigen opmaak kan geven. Als voorbeeld heb ik de tekst in kolom 3 rechts uitgelijnd en elke kolom een andere breedte gegeven.

RE: hoe bekom ik de lay-out van de eerste tabel dd. 07/07 ook in de laatste tabel ?
In de code bij elke <td> de class="..." weghalen, dan heb je de oorspronkelijke tabel terug.

RE: De opeenvolging van class-combinaties en de correcte 'aanroeping' ervan in HTML
Het gaat te ver om op dit forum een cursus html en css te geven dus ik zal beperken tot de werking
<td class="rand"> om een celrand een andere kleur te geven
<td class="merge-vert"> onderste rand transparant, optisch 2 cellen verticaal gekoppeld
<td class="merge-hor"> rechter rand transparant, optisch 2 cellen horizontaal gekoppeld

Suc6. Have fun.
 
Laatst bewerkt:
Dank aan bron voor het voorbeeld en de toelichting.
Dat helpt mij een eind weegs.

Heb nog volgende probleempjes
=> bestaat ook de mogelijkheid in de css code om de totale breedte van de tabel te bepalen op bijvoorbeeld 50% voor het scherm van een desktop en op 100% (enkel) voor een smartphone ?

=> (op gevaar af dat dit probleempje deze rubriek overstijgt) bestaat de mogelijkheid om de gegenereerde tabel als (deel van een) document in Word te 'krijgen' of in Word te kunnen openen, om dit document verder als een Word-document te kunnen bewerken ?

Dank voor tips.
 
Om de breedte van de tabel te bepalen ten opzichte van naastliggende elementen
Code:
@media screen and (min-width:768px) {
    .table-responsive {
        width: 50%;
    }
}
Over je tweede vraag, kopieer in je browser het resultaat en plak dit in Word. Helaas zal Word niet hetzelfde tonen. Wel kan je de tabel in Word bewerken. Terugzetten vanuit Word naar html kan maar dan wordt het een rommeltje.
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan