CODEWITHSUNDEEP
javascripthtmlcsshtml-table
feacco
feacco

Reputation: 605

How to make those table cells square which are changing table shape when table is overflow?

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/)

Upvotes: 3

Views: 798

Answers (1)

David W
David W

Reputation: 10184

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.

Upvotes: 2

Related Questions