CSS opmaak tabellen

Standaard opmaak tabel:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

/* Tabel vaste opmaak rand: collaps, margins en evt. padding cel */

table {

  border-collapse: collapse;

  /*  width:100%; **** opgeven voor alle tabellen of instellen in tabel-eigenschappen*/ 

  margin-top: 0px !important;

  margin-bottom: 0px !important;

}

td {

  padding-left: 15px;  /* padding kan ook alleen bij .afwisselend opgegeven worden, afh van content cel */

  padding-right: 15px;

}

---

Opmaak tabel met class .rand:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

/* Tabel opmaak met rand */

.rand table { border: 1px solid #BBBBBB; }

.rand tr { border: 1px solid #BBBBBB; }

.rand td { border: 1px solid #BBBBBB; }

.rand th { border: 1px solid #BBBBBB; }

---

Opmaak tabel met class .afwisselend:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

/* Tabel opmaak alternerend – alleen voor tabel met Class afwisselend t.b.v. ignite formulier */

.afwisselend tr:nth-child(odd) {background: #DDDDDD}

.afwisselend tr:nth-child(even) {background: #FFFFFF}

.afwisselend td {

  padding-left: 15px;

  padding-right: 15px;

/*  font-size: 13px; *** afh van site en setting*/

}

---

Opmaak tabel met class .afwisselend en .rand:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

 <table class="afwisselend rand">
<tbody>
<tr>
<td>&nbsp;</td>

---

 

Opmaak tabel met class .afwisselend en .rand, individuele cel kan "uitgezet" worden met .geenrand:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

<table class="afwisselend rand">
<tbody>
<tr>
<td class="geenrand">&nbsp;</td>
<td class="geenrand">&nbsp;Kolom 2</td>

---

 

 Opmaak tabel met class .afwisselend en  tr met class .rand:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

 <table class="afwisselend">
<tbody>
<tr class="rand">
<td>&nbsp;</td>

---

Opmaak tabel met class .afwisselend en  td met class .rand:

	Kolom 2	Kolom 3
Rij 2	Veld 2 - 2	Veld 2 - 3
Rij 3	Veld 3 - 2	Veld 3 - 3

<table class="afwisselend">
<tbody>
<tr>
<td>&nbsp;</td>
<td class="rand">Kolom 2</td>
<td>Kolom 3</td>
</tr>

---