【发布时间】：2016-05-28 06:10:59
【问题描述】：
我正在构建定价表/功能矩阵（下面是我正在尝试构建的图片）
我已经建立了基础，但我在底部的价格汇总方面遇到了麻烦，特别是对于“企业家”和“商业专业人士”列。
我希望能够在其上添加新行（新功能）并相应地调整（向下移动）底部价格。现在我正在使用相对定位，这不起作用，因为每次添加新功能/行时我都需要调整它。
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>【问题讨论】：
-
我不知道这个问题是否足够通用，适合 Stack Overflow 论坛。我建议您尝试使问题更笼统。
-
@Gewthen - 为什么问题必须是“通用的”？
-
您必须考虑这个问题对其他人有何用处。你的问题的症结是什么？定价矩阵方面与问题的技术方面无关，但您将其呈现为这样。因此，我会清理问题以反映您遇到的技术问题。看起来您在将多个表对齐在一起以使它们看起来像一个时遇到了麻烦。你有没有想过做一整张桌子？
-
@Gewthen - 是的，我一开始就把它做成一张桌子。挑战在于处理阴影。如果您查看我在上面发布的图像，您会看到前 2 个计划的列有一个投影，然后最右侧计划的列是一个不同的投影，延伸到其他列。此外，最右边的列需要比其他列高，因此将它们作为单独的表是有意义的。
标签： html css html-table css-tables