由于 box-shadow 不能在 display:table-row 元素上使用，我如何模仿表格并在伪行元素上使用 box-shadow？答案

【问题标题】：Since box-shadow cannot be used on display:table-row elements, how can I mimic a table and use box-shadow on the pseudo-row elements?由于 box-shadow 不能在 display:table-row 元素上使用，我如何模仿表格并在伪行元素上使用 box-shadow？
【发布时间】：2016-03-14 19:30:36
【问题描述】：

confirmed 已经不可能以与所有主要浏览器兼容的方式将box-shadow 添加到display:table-row 元素。出于令我难以置信的原因，一行不能被设置为一个组，这意味着您不能将 box-shadow 添加到 display:table 的整行中，而只能将其添加到单个 display:table-cell 元素中，这然后在单元格之间创建我不想要的垂直阴影。

那么我该如何模拟一个表格，其中伪表的所有伪行的第一个伪列的宽度与其最长元素的宽度相同，第二列是添加时剩下的任何宽度box-shadow 到伪行？

现在我在每个display:table-row 的第一个display:table-cell 元素上使用white-space: nowrap 和width: 1px 以确保所有行的最左列是该列中最长文本的宽度无论屏幕宽度如何。

在此处查看示例：https://jsfiddle.net/yupwh6uq/

这在格式化display:table 和列方面效果很好，但它不允许我将box-shadow 添加到display:table-row 元素。

那么我怎样才能获得我现在必须显示信息的自动列宽调整表格效果，但每个伪行上的 box-shadow 以与所有主要浏览器兼容的方式使用纯 HTML/CSS？

附注我想避免使用display:flex;，因为它会破坏旧浏览器的格式。

【问题讨论】：

您是否看过codepen.io/gc-nomade/pen/NNRVmd，如果您看过，效果是否足够好？
@GCyrillus：谢谢。我对这个解决方案的担心是有人在聊天中评论说它在 FireFox 中没有很好地显示box-shadow，所以现在我正在寻找一种适用于所有主要浏览器的解决方案。如果您有任何想法，请告诉我，再次感谢您的帮助。你太棒了！
否则你可以使用 display flex 并使用一个 flex 值，这会给每个单元格一个静态的 % width ...codepen.io/gc-nomade/pen/NNRVmd
您的小提琴已更新以进行测试：jsfiddle.net/yupwh6uq/4
这里需要回答的重要问题：1) 如果你想要一个表格，为什么不使用 HTML 表格标记？ 2) 如果最后一个问题和随后的聊天讨论告诉您这是不可能的，您为什么要以不同的方式再次问同样的问题？您需要一个完美的现代解决方案并支持旧版浏览器；实际上，您必须选择一个：纯 CSS 解决方案或更复杂的支持旧浏览器的解决方案。根据您的目标受众查找“渐进式增强”与“优雅降级”的做法。

标签： html css row css-tables box-shadow

【解决方案1】：

这会有所帮助

但它以固定的行高进行计算，并且需要跨度在 td 中（但在表格中可能不是问题）

http://codepen.io/michalkliment/pen/dWzwEG

（在 safari (ipad/mac) / chrome / IE10 / firefox 中测试）

<table>
  <tr>
    <td><span>Celll 1111</span></td>
    <td><span>Celll 222</span></td>
  </tr>
  <tr>
    <td><span>Cellll 33</span></td>
    <td><span>Cell 4</span></td>
  </tr>
</table>

【讨论】：