动态定价 table/feature 矩阵 HTML/CSS

Question

我正在构建定价 table/feature 矩阵（下面是我正在尝试构建的图片）

我已经建立了基础，但我运行遇到底部价格汇总的问题，特别是 'Entrepreneur' 和 'Business Pro' 列。

我希望能够在上面添加新行（新功能）并相应地调整最低价格（向下移动）。现在我正在使用相对定位，这是行不通的，因为每次添加新的 feature/row 时我都需要调整它。

Codepen Link: http://codepen.io/er40/pen/NxeZpq

.box {
  width: 1100px;
  margin: 50px auto;
}
/* Services Col */

.services-table {
  float: left;
  margin-top: 114px;
  z-index: 0;
  margin-right: 5px;
}
.services-table tr {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #f4f4f4;
}
.services-table tr:last-child {
  border-bottom: none;
}
.services-table th.services {
  color: #707478;
  font-weight: 100;
  min-width: 375px;
  background: #fff;
}
/* Entrepreneur and Business Pro Col */

table.price-matrix {
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
  float: left;
}
table.price-matrix tr {
  height: 40px;
  background: #fff;
}
/* Headers */

table.price-matrix th.header-white {
  color: #707478;
  font-weight: 100;
  font-size: 30px;
  min-width: 230px;
  text-align: center;
  padding: 15px 0;
  background: #fff;
}
table.price-matrix th.header-white:first-child {
  border-right: 1px solid #e3e3e3;
}
th.header-white hr,
th.header-green hr {
  width: 70%;
  border-bottom: 1px solid;
}
/* Rows */

tr:nth-child(even) td {
  background: #f7fafb;
}
tr:nth-child(even) td.td-green {
  background: #489a5a;
}
tr:nth-child(odd) td.td-green {
  background: #54aa66;
}
td.border {
  border-right: 1px solid #e3e3e3;
}
/* Enterprise */

.enterprise {
  float: left;
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
  margin-top: -20px;
}
.enterprise tr {
  height: 40px;
}
th.header-green {
  color: #fff;
  font-weight: 100;
  font-size: 30px;
  min-width: 230px;
  text-align: center;
  padding: 35px 0 15px;
  background: #54aa66;
}
.enterprise tr.price {
  height: 100px;
}
.enterprise tr.price-border {
  height: 10px;
}
span {
  display: inline-block;
  text-align: center;
  width: 230px;
  position: relative;
  left: 380px;
  bottom: 110px;
  font-size: 60px;
}

<section id="pakete">
  <div class="box">
    <!-- The surrounding box -->

    <!-- The front container -->
    <div class="front">
      <table class="services-table">
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
      </table>
      <table class="price-matrix" border="0">
        <tr>
          <th class="header-white">Entrepreneur
            <hr />
          </th>
          <th class="header-white">Business Pro
            <hr />
          </th>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>

        <tr>
          <td class="border"></td>
          <td class="entypo-cancel"></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
      </table>
      <table class="enterprise">
        <th class="header-green">Enterprise
          <hr />
        </th>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr class="price">
          <td class="td-green"></td>
        </tr>
        <tr class="price-border">
          <td class="td-green"></td>
        </tr>
      </table>
      <span>19</span>
    </div>
</section>

Answer 1

编辑：好的，这与图片不完全一样。但我认为这对于实际添加数据将是最有效的。如果您不需要添加额外的数据（至少根据我的知识和经验），您可以使它看起来与上图完全一样。虽然盒子阴影的工作方式，但我个人无法使其正常运行。

删除 <span> 并将跨度 class 更改为 .price。也删除 Display: inline-block;。我还添加了 .td-white，这将为白色定价提供您想要的外观（减去阴影）。我想这就是您要找的：

已更新*参考：http://codepen.io/anon/pen/wMZBqG

HTML:

<section id="pakete">
  <div class="box">
    <!-- The surrounding box -->

    <!-- The front container -->
    <div class="front">
      <table class="services-table">
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
      </table>
      <table class="price-matrix" border="0">
        <tr>
          <th class="header-white">Entrepreneur
            <hr />
          </th>
          <th class="header-white">Business Pro
            <hr />
          </th>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>

        <tr>
          <td class="border"></td>
          <td class="entypo-cancel"></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr class="price">
          <td class="td-white">20</td>
          <td class="td-white">20</td>
        </tr>
      </table>
      <table class="enterprise">
        <th class="header-green">Enterprise
          <hr />
        </th>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr class="price">
          <td class="td-green">20</td>
        </tr>
        <tr class="price-border">
          <td class="td-green"></td>
        </tr>
      </table>
    </div>
</section>

CSS:

.box {
  width: 1100px;
  margin: 50px auto;
}


/* Services Col */

.services-table {
  float: left;
  margin-top: 114px;
  z-index: 0;
  margin-right: 5px;
}

.services-table tr {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #f4f4f4;
}

.services-table tr:last-child {
  border-bottom: none;
}

.services-table th.services {
  color: #707478;
  font-weight: 100;
  min-width: 375px;
  background: #fff;
}


/* Entrepreneur and Business Pro Col */

table.price-matrix {
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
  float: left;
}

table.price-matrix tr {
  height: 40px;
  background: #fff;
}


/* Headers */

table.price-matrix th.header-white {
  color: #707478;
  font-weight: 100;
  font-size: 30px;
  min-width: 230px;
  text-align: center;
  padding: 15px 0;
  background: #fff;
}

table.price-matrix th.header-white:first-child {
  border-right: 1px solid #e3e3e3;
}

th.header-white hr,
th.header-green hr {
  width: 70%;
  border-bottom: 1px solid;
}


/* Rows */

tr:nth-child(even) td {
  background: #f7fafb;
}

tr:nth-child(even) td.td-green {
  background: #489a5a;
}

tr:nth-child(odd) td.td-green {
  background: #54aa66;
}

td.border {
  border-right: 1px solid #e3e3e3;
}


/* Enterprise */

.enterprise {
  float: left;
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
  margin-top: -20px;
}

.enterprise tr {
  height: 40px;
}

th.header-green {
  color: #fff;
  font-weight: 100;
  font-size: 30px;
  min-width: 230px;
  text-align: center;
  padding: 35px 0 15px;
  background: #54aa66;
}

.enterprise tr.price {
  height: 100px;
}

.enterprise tr.price-border {
  height: 10px;
}

.price {
  text-align:center;
  width:230px;
  position:relative;
  left:380px;
  bottom:110px;
  font-size:60px;
}

.td-white {
  background-color: #FFFFFF !important;
  border-right: 1px solid #e3e3e3;
  border-top: 1px solid #e3e3e3
}

这应该允许您添加新服务并使最低定价随之动态变化。

Answer 2

这个 UI 有很多解决方案，但据我所知，这是实现此目的的 quickest/standardised 方法。这种布局也是响应式的。

注：我用过很多:not Selectors to avoid inheritance。

function priceTable() {
  var whiteLeft = $('.white-left').innerWidth(),
    greenWidth = $('.green-width').innerWidth(),
    whiteHeight = $('.price').innerHeight();

  $('.bg-white').css({
    'left': whiteLeft,
    'bottom': whiteHeight
  });

  $('.bg-green').css({
    'width': greenWidth
  });
};

$(document).ready(priceTable);
$(window).on('resize load', priceTable);

body {
  background: #f1f1f1;
  font: 13px/16px sans-serif;
}
.main {
  position: relative;
}
.main .bg-white,
.main .bg-green {
  position: absolute;
  right: 0;
}
.main .bg-white {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  top: 20px;
}
.main .bg-green {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  top: 0;
  bottom: 0;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 9;
}
.price-table .min {
  height: 10px;
  padding: 5px;
}
.price-table tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.price-table tr:nth-child(2n) td:not(:first-child,
:last-child,
.price) {
  background: rgba(0, 0, 0, 0.02);
}
.price-table tr:nth-child(2n) td:last-child {
  background: #428c52;
}
.price-table tr td {
  padding: 20px;
}
.price-table tr td:not(:first-child) {
  text-align: center;
}
.price-table tr td:last-child {
  background: #489a5a;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <span class="bg-white"></span>
  <span class="bg-green"></span>
  <table class="price-table">
    <thead>
      <tr>
        <td class="min" colspan="3"></td>
        <td class="min"></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="white-left">&nbsp;</td>
        <td>Entrepreneur</td>
        <td>Business Pro</td>
        <td class="green-width">Enterprise</td>
      </tr>
      <tr>
        <td>Service 1</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 2</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 3</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 4</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="price">/month</td>
        <td class="price">/month</td>
        <td>/month</td>
      </tr>
    </tbody>
  </table>
</div>

动态定价 table/feature 矩阵 HTML/CSS

Dynamic pricing table/feature matrix with HTML/CSS

html

css

html-table

css-tables