Tabel - Probleem met titelregel en celranden

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
tabel bestaat uit een aantal omrande kolommen/cellen :
width = 5% + width = 20% + width = 20% + ...
In de titelregel zijn de cellen van kolom 1 en 2 'samengevoegd' met 1 rand => titeldeel omvat 1ste en 2de kolom.

De titel van kolommen 1 en 2 zou volledig links moeten staan in de omlijnde 2 cellen.
Aangezien evenwel de verdere breedte van de kolommen bepaald wordt in de titelbalk zie ik niet goed in hoe de structuur wordt behouden als ik daar werk met een colspan="2".

Hoe kan ik de titel volledig links zetten in de 1ste kolom annex 2de kolom en toch de structuur van de tabel behouden (om de passende databasegegevens te lijsten) ?
Kan ik hier toch eventueel met colspan="2" aan de slag ?

Ik merk overigens dat EDGE de celranden weergeeft terwijl Chrome geen randen toont => <style="border-left: 1 solid #C0C0C0; border-right: none; border-top: 1 solid #C0C0C0; border-bottom: 1 solid #C0C0C0"> - Of is dit enkel een 'Edge-aanpak' ?

Dank voor tips
 
Goe bezig, iemand met een glazen bol kan het zo oplossen.
 
Je vraag is vaag maar misschien kan je hier iets mee. Werkt in alle browsers.
Code:
<style type="text/css">
table {
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
    border:1px solid #777;
}
th, td {
    box-sizing:border-box;
    vertical-align:top;
    padding:4px 8px;
    border:1px solid #777;
}
.data th {
    color:#009;
}
.data th:nth-child(1),
.data th:nth-child(2) {
    text-align:left;
}
.data td:nth-child(1) {width:8%}
.data td:nth-child(2) {width:22%}
.data td:nth-child(3) {width:70%}
</style>

<table class="data">
<thead>
    <tr>
        <th colspan="2">Huidige voorraad</th>
        <th>Omschrijving</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>12</td>
        <td>dozen</td>
        <td>bla bla bla</td>
    </tr>
    <tr>
        <td>347</td>
        <td>pakketten</td>
        <td>bla bla bla</td>
    </tr>
</tbody>
</table>
Suc6. Have fun.
 
Laatst bewerkt:
Dank bron - dit is inderdaad de voorstelling / oplossing die ik zocht.
Voor zover ik het juist begrijp kom je van de 2 naar de 3 kolommen via nth-child() - deze selector is/was mij niet bekend.
 
colspan="2" zorgt ervoor dat 2 cellen (naast elkaar) worden samengevoegd tot 1 cel.
Selector :nth-child(..) verwijst naar de style waarin de tekst links wordt uitgelijnd. Deze selector is cross browser vanaf de IE9 (Win Vista) tijdlijn.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan