0
我有一个具有一定宽度的容器中的定价表。 我在所有列和最后一列之间也有20px的间距。由于left:20px,CSS表不尊重容器大小:
的相关部分,以实现我的表间距
tr td:nth-of-type(5), tr td:nth-of-type(3):not(.table-hold){
position: relative;
left: 20px;
background-color: #eee;
}
这工作得很好,这给了我的1-4th列和最后一列之间的间距。但现在我有问题,我的桌子超出了我的容器。我该如何解决这个问题?
https://codepen.io/Insane415/pen/rwvBaq
在这里你可以看到一整页上。该表去外面容器
https://codepen.io/Insane415/full/rwvBaq/
<div class="container">
<h1>Lorem Ipsum <br>Lorem</h1>
<table class="pricing-table">
<tr>
<td id="table-heading"></td>
<td>
<input type="radio" id="radio1" value="allin-order" name="tarif-top">
<label for="radio1">Package 1</label>
</td>
<td class="red-background table-hold">
<input type="radio" checked id="radio2" value="allin-time" name="tarif-top">
<label for="radio2">Package 2</label></td>
<td>
<input type="radio" id="radio3" value="allin-contact" name="tarif-top">
<label for="radio3">Package 3</label></td>
<td>
<input type="radio" id="radio4" value="enterprise" name="tarif-top">
<label for="radio4">Package 4</label>
</td>
</tr>
<tr>
<td>fee</td>
<td colspan="3">20$</td>
<td>bla</td>
</tr>
<tr>
<td>Lorem</td>
<td colspan="3">Lorem Ipsum</td>
<td>24/7</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td class="red-background table-hold">Lorem Ipsum</td>
<td>Lorem Ipsum Lorem Ipsum</td>
<td>Lorem Ipsum Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td>Lorem Ipsum Lorem Ipsum</td>
<td class="red-background table-hold">—</td>
<td>—</td>
<td>Lorem Ipsum Lorem Ipsum</td>
</tr>
<tr id="services">
<td>Lorem Ipsum Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td></td>
<td colspan="3">Lorem Ipsum Lorem Ipsum</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">Lorem Ipsum Lorem Ipsum</td>
<td>Check</td>
</tr>
<tr>
<td>Lorem Ipsum Lorem Ipsum</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td>OLorem Ipsum Lorem Ipsum</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">Package 1</label>
</td>
<td class="red-background table-hold">
<input type="radio" checked id="radio6" value="allin-time" name="tarif-bottom">
<label for="radio6">Package 2</label>
</td>
<td>
<input type="radio" id="radio7" value="allin-contact" name="tarif-bottom">
<label for="radio7">Package 3</label>
</td>
<td>
<input type="radio" id="radio8" value="enterprise" name="tarif-bottom">
<label for="radio8">Package 4</label>
</td>
</tr>
</table>
</div>
<!-- END table -->
/*BEGIN Custom Radio Button*/
label{
position: relative;
}
h1{display:inline-block;
position: relative;
top: 90px;
z-index: 5;
}
input[type="radio"]{
display: none;
}
.pricing-table label{
margin-bottom: 15px;
display: block;
}
label:before{
content: '';
width: 20px;
height: 20px;
border: 3px solid white;
display: inline-block;
border-radius: 100%;
position: absolute;
left: 0;
top: 25px;
bottom: 0;
right: 0;
margin: 0 auto;
}
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: 0;
bottom: 0;
right: 0;
margin: 0 auto;
}
label:hover{
cursor: pointer;
}
/*END Custom Radio Button*/
/*BEGIN space between table columns*/
table {border-collapse: separate; border-spacing:0; }
tr td:nth-of-type(5), tr td:nth-of-type(3):not(.table-hold){
position: relative;
left: 20px;
background-color: #eee;
}
table {
border-spacing: 0 2px;
}
tr{
position: relative;
top: 10px;
}
/*END space between table columns*/
.pricing-table{
text-align: center;
width: 100%;
}
.pricing-table td{
background-color: #ddd;
padding: 12px;
}
.pricing-table tr td:first-child{
background-color: #eee;
text-align: left;
}
.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;
padding-bottom: 30px;
}
.red-background{
color: white!important;
background-color: #E22C26!important;
}
/* BEGIN Radio Buttons*/
/*END Radio Buttons*/
_“桌子放在容器外面”_ - 呃,不,实际上它没有;只有你的最后一个表单元格才会出现在容器之外......这并不令人意外,因为这只是相对定位_does_ - 它将元素相对于它通常具有的位置相对移动。 – CBroe
如何在不将最后一个表格单元移出容器之外的情况下保持列之间的间距? – Insane