由於left：20px，CSS表不尊重容器大小：

我有一個具有一定寬度的容器中的定價表。我在所有列和最後一列之間也有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*/

來源

2017-07-03 Insane

_「桌子放在容器外面」_ - 呃，不，實際上它沒有;只有你的最後一個表單元格纔會出現在容器之外......這並不令人意外，因爲這只是相對定位_does_ - 它將元素相對於它通常具有的位置相對移動。 – CBroe

如何在不將最後一個表格單元移出容器之外的情況下保持列之間的間距？ – Insane

也許你可以取代「左：20px的」同「左邊框：20px的固體#FFF;」

來源

2017-07-03 09:31:24

謝謝，這工作得很好 – Insane

由於left：20px，CSS表不尊重容器大小：

回答

相關問題