由于box-shadow不能用于显示：表格行元素，我怎样才能模拟表格并在伪行元素上使用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?

问题描述

已经

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.

解决方案

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>

这篇关于由于box-shadow不能用于显示：表格行元素，我怎样才能模拟表格并在伪行元素上使用box-shadow？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！