Question

需要创建这个（底部表格）......

Table Example

实现这一目标的最佳方法是什么。 考虑最后一列的渐变和阴影。尝试在顶部放置一行，在底部放置一行，但是投影进入每个单元格。

Answer 1

有点棘手，但我想，这基本上就是你想要的：

HTML：

<div class="products">
    <div class="legend">
        <table>
            <tr><td>&nbsp;</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彼此相邻，其中一个不同。然后在每个盒子里放一张相同高度/行的桌子通过更多样式工作，可以使这个示例看起来像您的示例。

Answer 2

尝试将以下样式应用于第四列。

box-shadow: 0px 0px 20px 1px rgba(51, 51, 51, 0.5);
border-top: 10px solid #FC8600;
border-bottom: 10px solid #FC7500;

删除您用于添加10 px边框的<tr>元素。
删除最后一个单元格border-bottom。

比其他HTML / CSS大一列

2 个答案: