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

Question

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

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

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

请参见此处的示例： https ： //jsfiddle.net/yupwh6uq/

就格式化display:table和columns而言，这很有用，但不允许我向display:table-row元素添加box-shadow 。

那么我如何才能获得自动列宽度调整表格效果，我现在可以显示信息，但每个伪行上的box-shadow是否与使用纯HTML / CSS的所有主流浏览器兼容？

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

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>