Question

我正在寻找实现这个目标的方法：

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

我设法用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? */
}

感谢您的任何建议！

Answer 1

好的，所以让它工作但不像你想要的那样（比如95％.. :)）。这是我能得到的最接近的。

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

我尝试将表格单元格更改为：block。表格单元确实占据了整个空间，但现在表格行没有显示阴影（为什么???，我认为因为它们现在表现为表格行，然后又回来了。）。所以，最后再考虑一下，我将阴影应用于表格单元格并删除了所有显示：无处不在。尤里卡，阴影确实显示，唯一的是阴影现在在细胞而不是行和视觉上它可能不是你想要100％的结果。无论如何，这是工作fiddle。

表格行与可见阴影

1 个答案: