html - 一列比其他列大 HTML/CSS

Question

需要创建一些东西（底部表格）......

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

Answer 1

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

http://jsfiddle.net/qe2vc/

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;

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