1

我正在寻找一种方法来实现这一目标：

设置一个表格，其中的行之间有空格，以显示它们的 box-shadow

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

这是小提琴和应该向您展示我的意思的代码。 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? */
}

​</p>

感谢您的任何建议！

4

1 回答 1

0

好的，所以让它工作了，但没有你想要的那么接近（比如 95% ..:)）。这是我能得到的最接近的。

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

我试图将表格单元格更改为显示：块。表格单元格确实占据了整个空间，但现在表格行没有显示阴影（为什么？？？，我想是因为它们现在表现得像表格行，又回来了。）。所以，最后什么都不想了，我对表格单元格应用了阴影并删除了所有显示：块）。尤里卡，阴影确实显示了，唯一的事情是阴影现在在单元格而不是行上，并且在视觉上它可能不是你想要的 100% 的结果。无论如何，这是工作小提琴。

于 2012-06-25T11:06:22.117 回答