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.
Terug
Bovenaan Onderaan