1

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.

Community
  • 1
  • 1
ProgrammerGirl
  • 3,157
  • 7
  • 45
  • 82
  • did you take a look at http://codepen.io/gc-nomade/pen/NNRVmd and if you did, did it work good enough ? – G-Cyrillus Mar 14 '16 at 19:36
  • @GCyrillus: Thanks for that. My fear with that solution is that somebody commented in the chat that it did not display the `box-shadow` well in FireFox, so now I'm looking for a solution that works in all major browsers. Please let me know if you have any ideas, and thanks again for all your help. You've been great! – ProgrammerGirl Mar 14 '16 at 19:43
  • else you may use display flex and use a flex value, this will give each cells a static % width ... http://codepen.io/gc-nomade/pen/NNRVmd – G-Cyrillus Mar 14 '16 at 19:57
  • @GCyrillus: The problem with `display:flex` is that it doesn't work with older Mobile browsers, for instance. I know `box-shadow` doesn't work with older Mobile browsers either, but in that case, it simply won't display the shadowing. However, if it doesn't understand `display:flex` then it will display the info all wrong, so that's not an option, unfortunately. – ProgrammerGirl Mar 14 '16 at 20:01
  • actually i haven't myself seen the problem in FF about the pseudo technic. **What you need will require javascript to set width of each columns element to make it bullet proof**. As said earlier, box-shadow is not cross browser avalaible for table-row / tr elements :( – G-Cyrillus Mar 14 '16 at 20:05
  • @GCyrillus: This is getting really tough! Let me test your other solution a bit further to see how it does on older browsers. Thanks again! – ProgrammerGirl Mar 14 '16 at 20:10
  • 1
    your fiddle updated for test : https://jsfiddle.net/yupwh6uq/4/ – G-Cyrillus Mar 14 '16 at 20:18
  • @GCyrillus: Many thanks! – ProgrammerGirl Mar 14 '16 at 20:31
  • 1
    Important questions that need to be answered here: **1)** If you want a table, why are you not using HTML table markup? **2)** If the last question and ensuing chat discussion told you it's not possible, why are you asking the same question again in a different way? You're asking for a perfect modern solution and support for older browsers; in reality you have to pick one: CSS-only solution or a more complex solution that supports older browsers. Look up the practice of "progressive enhancement" vs "graceful degradation" depending on your target audience. – TylerH Mar 14 '16 at 20:41
  • @TylerH: I don't necessarily need tables, but I do need the left cells of all results to be the same width, and I need that width to be the minimal amount needed such that no text in those first cells wraps, and I need the box-shadow, and I need this to work in the majority of browsers since part of my users use older browsers. Since it's already shown that we can't achieve that with actual tables (although GCyrillus has a potential solution for that, albeit complicated), I'm asking if there's a way to achieve this *without* actual tables. That's why I'm prepending everything with "pseudo". – ProgrammerGirl Mar 14 '16 at 21:54

1 Answers1

0

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>

[1]: http://codepen.io/michalkliment/pen/dWzwEG

Michal Kliment
  • 303
  • 3
  • 8