-1
Ich habe eine Preistabelle und ich möchte ein wenig Platz zwischen jeder Tabelle. In meiner Tabelle habe ich 4 verschiedene Pakete, die der Benutzer buchen kann, und ich möchte auch Platz zwischen den 3 Paketen und dem letzten Paket (Enterprise)CSS Haben Marge in Tabellen?
Ist das mit einer Tabelle möglich oder brauche ich meine ganze HTML-Struktur und ersetze die Tisch mit Divs? Denn das wäre eine Menge Ärger.
label {
position: relative;
}
input[type="radio"] {
display: none;
}
label:before {
content: '';
width: 20px;
height: 20px;
border: 3px solid white;
display: inline-block;
border-radius: 100%;
position: absolute;
left: 30px;
top: 25px;
}
input[type="radio"]:checked+label:after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
background-color: white;
display: inline-block;
position: absolute;
top: 30px;
left: 35px;
}
label:hover {
cursor: pointer;
}
/*END Custom Radio Button*/
.pricing-table {
text-align: center;
}
.pricing-table td {
background-color: #ccc;
padding: 12px;
}
.pricing-table tr td:first-child {
background-color: #ddd;
text-align: left;
}
.pricing-table tr td:last-child {}
.pricing-table tr:last-child td:first-child {
background-color: white;
}
.pricing-table #services td,
#table-heading {
font-weight: 600;
background-color: white;
}
.pricing-table tr:first-child td:nth-of-type(1n+2),
.pricing-table tr:last-child td {
background-color: #545067;
color: white;
}
.red-background {
color: white!important;
background-color: #E22C26!important;
}<table class="pricing-table">
<tr>
<td id="table-heading">
<h1>Leistungen & Preise Telefonservice</h2>
</td>
<td>
<input type="radio" id="radio1" value="allin-order" name="tarif-top">
<label for="radio1">AllIn-Order</label>
</td>
<td class="red-background">
<input type="radio" checked id="radio2" value="allin-time" name="tarif-top">
<label for="radio2">AllIn-Time</label></td>
<td>
<input type="radio" id="radio3" value="allin-contact" name="tarif-top">
<label for="radio3">AllIn-Contact</label></td>
<td>
<input type="radio" id="radio4" value="enterprise" name="tarif-top">
<label for="radio4">Enterprise</label>
</td>
</tr>
<tr>
<td>Monatliche Grundgebühr</td>
<td colspan="3">nur 59,90€</td>
<td>individuell</td>
</tr>
<tr>
<td>Telefonische Annahmezeit</td>
<td colspan="3">Mo-Fr 08:00 bis 19:00 Uhr</td>
<td>24/7</td>
</tr>
<tr>
<td>Kosten pro Minute/Kontakt</td>
<td>0,69€/Minute</td>
<td class="red-background">0,89€/Minute</td>
<td>3,00€/Kontakt</td>
<td>individuell</td>
</tr>
<tr>
<td>Transaktionsgebühren</td>
<td>12,5%/Bestellung</td>
<td class="red-background">—</td>
<td>—</td>
<td>individuell</td>
</tr>
<tr id="services">
<td>Enthaltene Leistungen</td>
</tr>
<tr>
<td>Englischsprachiger Telefonservice</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Kundenservice für Markplätze</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Bestellannahme für Waren</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Anrufnotiz via E-Mail</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Anrufnotiz via E-Mail</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Monatliches Reporting</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Weiterleitung Festnetz (DE)</td>
<td colspan="3">0,09€/Minute</td>
<td>Check</td>
</tr>
<tr>
<td>Weiterleitung Mobilfunknetz (DE)</td>
<td colspan="3">0,25€/Minute</td>
<td>Check</td>
</tr>
<tr>
<td>Buchungsannahme</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td>Outbound-Kampagnen</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" id="radio5" value="allin-order" name="tarif-bottom">
<label for="radio5">AllIn-Order</label>
</td>
<td class="red-background">
<input type="radio" checked id="radio6" value="allin-time" name="tarif-bottom">
<label for="radio6">AllIn-Time</label>
</td>
<td>
<input type="radio" id="radio7" value="allin-contact" name="tarif-bottom">
<label for="radio7">AllIn-Contact</label>
</td>
<td>
<input type="radio" id="radio8" value="enterprise" name="tarif-bottom">
<label for="radio8">Enterprise</label>
</td>
</tr>
</table>