Question

我有一个定价表，它位于具有一定宽度的容器中。我在所有列和最后一列之间的间距也是20px。

在我的表中实现该间距的相关部分是

tr td:nth-of-type(5), tr td:nth-of-type(3):not(.table-hold){
  position: relative;
  left: 20px;
  background-color: #eee;
}

这很好用，这给了我第1-4列和最后一列之间的间距。但现在我遇到的问题是我的桌子超出了我的容器。我该如何解决这个问题？

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*/

Answer 1

也许您可以将“left：20px”替换为“border-left：20px solid #FFF;”

CSS表并不尊重容器大小，因为左：20px;

1 个答案: