<分区>
要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
关闭 9 年前。
html - 一栏比其他栏大 HTML/CSS
需要创建这样的东西(底部表格)...
实现此目标的最佳方法是什么。 考虑最后一列的渐变和阴影。尝试在顶部放一行，在底部放一行，但投影进入了每个单元格。
最佳答案
有点棘手，但我认为，这基本上就是您想要的:
HTML:
<div class="products">
<div class="legend">
<table>
<tr><td> </td></tr>
<tr><td>Property 1</td></tr>
<tr><td>Property 2</td></tr>
<tr><td>Property 3</td></tr>
</table>
</div><div>
<table>
<tr><td>Product A</td></tr>
<tr><td>Yes</td></tr>
<tr><td>No</td></tr>
<tr><td>No</td></tr>
</table>
</div><div>
<table>
<tr><td>Product B</td></tr>
<tr><td>Yes</td></tr>
<tr><td>Yes</td></tr>
<tr><td>No</td></tr>
</table>
</div><div class="featured">
<table>
<tr><td>Product C</td></tr>
<tr><td>Yes</td></tr>
<tr><td>Yes</td></tr>
<tr><td>Yes</td></tr>
</table>
</div>
</div>
CSS:
DIV.products > DIV {
display: inline-block;
border: 1px solid blue;
height: 100px;
vertical-align: middle;
padding: 0 3px;
}
DIV.products > DIV.legend {
border: 0;
}
DIV.products > DIV.featured {
border: 1px solid orange;
height: 108px;
padding-top: 8px;
box-shadow: 0px 0px 6px -1px #000;
}
基本上，有几个 div 彼此相邻，为其中一个设置不同的样式。然后在每个盒子里放一张相同高度/行数的表格。
通过更多的样式设置，可以使此示例看起来像您的示例。
关于html - 一栏比其他栏大 HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19427254/