Поскольку box-shadow нельзя использовать для элементов display:table-row, как я могу имитировать таблицу и использовать box-shadow для элементов псевдостроки?

Это уже было подтверждено что невозможно добавить элемент box-shadow к элементу display:table-row таким образом, чтобы это было совместимо со всеми основными браузерами. По непонятным мне причинам строка не может быть оформлена как группа, что означает, что вы не можете добавить box-shadow ко всей строке в display:table, а можете добавить ее только к отдельным элементам display:table-cell, что затем создаст вертикальное затенение внутри. между ячейками, которые мне не нужны.

Итак, как я могу имитировать таблицу, в которой ширина первого псевдостолбца всех псевдострок псевдотаблицы равна ширине ее самого длинного элемента, а второй столбец - это ширина, оставшаяся при добавлении box-shadow к псевдоряд?

Прямо сейчас я использую white-space: nowrap и width: 1px для первого элемента display:table-cell каждого display:table-row, чтобы крайний левый столбец всех строк соответствовал ширине самого длинного текста в этом столбце независимо от ширины экрана.

См. пример здесь: https://jsfiddle.net/yupwh6uq/

Это прекрасно работает с точки зрения форматирования display:table и столбцов, но не позволяет мне добавлять box-shadow к элементам display:table-row.

Итак, как я могу получить эффект таблицы с автоматической регулировкой ширины столбца, который у меня есть сейчас, для отображения информации, но с box-shadow в каждой псевдостроке таким образом, чтобы он был совместим со всеми основными браузерами, использующими чистый HTML/CSS? ?

P.S. Я не хочу использовать display:flex;, так как это нарушит форматирование в старых браузерах.