问题
It's already been confirmed that it's not possible to add a box-shadow to a display:table-row element in a way that's compatible with all the major browsers. For reasons that boggle my mind, a row cannot be styled as a group, which means you can't add a box-shadow to an entire row in a display:table and can only add it to the individual display:table-cell elements, which then creates vertical shadowing in-between cells which I don't want.
So how can I mimic a table whereby the width of the first pseudo-column of all the pseudo-rows of the pseudo-table are the same width as its longest element, and the second column is whatever width is left while adding box-shadow to the pseudo-row?
Right now I'm using white-space: nowrap and width: 1px on the first display:table-cell element of each display:table-row to ensure the left-most column of all rows are the width of the longest text in that column regardless of the width of the screen.
See example here: https://jsfiddle.net/yupwh6uq/
That works great in terms of formatting the display:table and the columns, but it doesn't allow me to add box-shadow to the display:table-row elements.
So how can I get the auto-column-width-adjusting table effect that I have now to display the info, but with the box-shadow on each pseudo-row in a way that's compatible with all major browsers using pure HTML/CSS?
P.S. I want to avoid using display:flex; as it will break the formatting on older browsers.
回答1:
This can help
but it calculates with fix height of a row and need span in td (but it could not be a problem in the table)
http://codepen.io/michalkliment/pen/dWzwEG
(tested in 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>
来源：https://stackoverflow.com/questions/35996396/since-box-shadow-cannot-be-used-on-displaytable-row-elements-how-can-i-mimic-a