2017-06-19 23 views
-1

我有一個定價表,我想在每個表之間留出一點空間。在我的表中,我有4個不同的包,用戶可以預訂,我也想要3個包和最後一個包之間的空間(企業)CSS在表格中有餘量?

這是可能的表或我需要我的整個html結構,桌子與divs?因爲那會很麻煩。

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 &amp; 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>

回答

-1

只需使用cellpacing表標籤

<table cellspacing="10" class="pricing-table"> 

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 cellspacing="10" class="pricing-table"> 
 
    <tr> 
 
    <td id="table-heading"> 
 
     <h1>Leistungen &amp; 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>

0

您可以在td元素使用填充。喜歡的東西:

tr.space > td 
 
{ 
 
    padding-top:1em; 
 
} 
 

 
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 &amp; 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 class="space"> 
 
    <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>