由于box-shadow不能用于显示：table-row元素，我如何模仿表并在伪行元素上使用box-shadow？

Question

已经confirmed已经https://jsfiddle.net/yupwh6uq/无法以与所有主流浏览器兼容的方式向box-shadow元素添加display:table-row。出于让我困惑的原因，无法将行设置为一个组，这意味着您无法将box-shadow添加到display:table中的整行，并且只能将其添加到个人{{} 1}}元素，然后在我不想要的单元格之间创建垂直阴影。

那么如何模仿一个表，其中伪表的所有伪行的第一个伪列的宽度与其最长元素的宽度相同，第二列是添加时留下的任何宽度display:table-cell到伪行？

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

请参阅此处的示例：How to tell visual studio to rebuild every time I make a change?

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

那么如何才能获得我现在拥有的自动列宽度调整表效果来显示信息，但每个伪行上的display:table-row以与所有伪兼容的方式使用纯HTML / CSS的主要浏览器？

P.S。我想避免使用box-shadow，因为它会破坏旧版浏览器的格式。

Answer 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>