3

A Simple Problem: When table is wider than screen and if we add a bigger text in any cell or <td>.

It will increase the height for whole row unnecessary extra

Case 1 (no problem) (only table overflow): (http://jsfiddle.net/dg3romjt/)

Case 2 (no problem) (only a cell with more text): (http://jsfiddle.net/mg8869ou/)

Case 3 (PROBLEMATIC) (overflow + a cell with more text): (http://jsfiddle.net/w1dc380w/3/)

feacco
  • 567
  • 4
  • 13
  • 1
    You may have difficulty in getting this to work in general because of differing pixel width ratios on different screens...that is, square on one monitor might not be square on another. – David W Aug 04 '15 at 13:47
  • Give each `` a _span_ or _div_ child styled as _display: inline-block_ and have your overflow rules set on that element (e.g. _position: relative_, _top, bottom, left, right_ all `0`) – Paul S. Aug 04 '15 at 13:53
  • 1
    This is just not a good idea. Think about it, if all table cells are square shaped, and one table cell needs to be huge, then ALL table cells will need to be just as huge as the one that scales to stay square. If you're having trouble envisioning it, this is what your table will end up looking like: http://jsfiddle.net/92roekr0/ – Jan Aug 04 '15 at 14:40

1 Answers1

2

I hesitate to post this as an "answer," when it's more of a caution.

What you're attempting to do may not be possible. Differing displays will have differing pixel aspect ratios (PAR), so if you devise a solution that looks "right" (square) on Monitor X, the exact same page with the same CSS may not look the same on a different display setup with a different PAR.

EDIT: I did find a somewhat related SO post about device pixel ratios here that indirectly discusses the issue.

I could be mistaken on this, but I don't think PAR is something that is handled in CSS at all. You may well find a solution, but be advised it may prove more elusive than you imagine. It could be that you might have to settle for one that is very close, albeit imperfect.

Community
  • 1
  • 1
David W
  • 10,062
  • 34
  • 60
  • I think this is probably a bit more technical than OP needs, for the most part it's okay to think of _`x`px by `x`px_ as square, the "wider than screen" seems to be talking about content expanding the table rather than varying screen specifications – Paul S. Aug 04 '15 at 13:57
  • Well, I kinda thought so too back in the day until I started tinkering with a similar problem (not HTML related, but similar), so I thought I'd at least post the caution. – David W Aug 04 '15 at 13:59
  • 1
    The answer is you may not *get* a "practical solution." That was the point of my post. – David W Aug 04 '15 at 14:07
  • If you have a PAR of 1 on Device A, but a PAR of 1.5 on Device B, a theoretical 5x5px image may look square on Device A, but will/may appear rectangular on Device B. That's all. If true "squareness" is critical, you'll need to have a good handle on the devices that will render your page. – David W Aug 04 '15 at 14:22