css - 带有可见阴影的表格行

Question

我正在寻找实现此目标的方法:

设置一个表格，其中的行之间有空格以显示它们的框阴影

我设法用 display:block 设置了它。我怎么不知道如何用百分比扩展包含的 td 元素以便能够使用响应式设计

这是应该向您展示我的意思的 fiddle 和代码。 http://jsfiddle.net/dN5DM/247/

<table>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
    </tr>
    <tr>
        <td>label A </td>
        <td>longLabel B</td>
        <td>short</td>
    </tr>
</table>


table{
    width : 100%;
    border: 0px;
    margin: 5px;  /* how? margin on both sides visible */
}
tr {
    display: block; 
    margin-bottom: 5px;
     -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.75);
}
td {
    height: 80px;
    border: 1px solid red;
    width: 33%;  /* how? expanding the tds to fill the whole row? */
}

感谢您的任何建议!

Answer 1

好的，它开始工作了，但没有达到您想要的程度(比如 95%..:))。这是我能得到的最接近的。

由于您在表格行上使用了 display:block，它不再表现为表格行而是作为 block 元素，这就是为什么您的单元格没有占用 33%(原因，我不知道，也许有人知道)。但是，如果您需要将样式(阴影)应用于您需要执行此操作的行。

我试图将表格单元格更改为显示: block 。表格单元格确实占据了整个空间，但现在表格行没有显示阴影(为什么？？？，我想是因为它们现在表现为表格行，又回来了。)。所以，最后什么也不想了，我对表格单元格应用了阴影并删除了所有显示:到处都是 block )。 Eureka ，阴影确实显示了，唯一的问题是阴影现在出现在单元格上而不是行上，从视觉上看，它可能不是您想要的 100% 的结果。无论如何，这是工作 fiddle .