动态定价表/功能矩阵与HTML / CSS

时间：2016-02-16 19:30:44

标签： html css html-table css-tables

我正在制作定价表/功能矩阵（我想在下面构建的图片）

enter image description here

我已经建立了基础，但是我在底部的价格汇总遇到了麻烦，特别是“企业家”和“商业专业”栏目。

我希望能够在此处添加新行（新功能）并相应地调整底部价格（向下移动）。现在我正在使用相对定位，这不会起作用，因为每次添加新的特征/行时我都需要调整它。

Codepen链接：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>

2 个答案:

答案 0 :(得分：1)

此UI有更多解决方案，但据我所知，这是实现这一目标的最快/最标准化的方法。这种布局也是响应性的。

注意：我使用了许多:not Selectors来避免inheritance。

＆＃13;
＆＃13; 
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);
＆＃13; 
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;
}
＆＃13; 
<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">$19/month</td>
        <td class="price">$19/month</td>
        <td>$19/month</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

编辑：好的，这与图像完全不同。但我认为实际添加数据最有效。如果您不需要添加其他数据（至少根据我的知识和经验），您可以使其看起来与上图完全相同。盒子阴影的工作方式，我个人无法使它完全正常工作。

删除<span>并将范围类更改为.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
}

这应该允许您添加新服务并使底层定价与其动态移动。

相关问题
最新问题