Prevent size distortion of table

Question

I created a pixel art maker that allows the user to choose a grid size of his or her liking. I added the following CSS to convert it to a two-column layout (along with divs in my HTML), in order to display the panel to the left of the grid:

.column {
  float: left;
  width: 35%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

You can view my CodePen for reference.

However, the default 25 x 25 grid is taller than it is wide. I tried fiddling with width: 35%; but each outcome was distorted. How can I make it a perfect square?

Bhuwan · Accepted Answer · 2018-03-24T04:26:29.267

3

Its because your table parent class has width:35% which means table will take 100% of the parent width if table content exceeded, which will override the td width, but if table content is not exceeded the td width will work.

So you will need to use min-width: 20px with box-sizing: border-box; instead of width in the td.

You can find more info here

td {
  min-width: 20px;
  box-sizing: border-box;
}

Updated Codepen

edited Mar 24 '18 at 04:26

answered Mar 23 '18 at 15:09

Bhuwan

16,525
5
34
57

Using `box-sizing: border-box` should be more than sufficient :) – Terry Mar 23 '18 at 15:12
Your code worked (min-width was indeed needed), but it's still taller than it is wide. Any idea why that could be? – nCardot Mar 24 '18 at 02:31
@NatalieCardot I think width and height are same...see the attached image above – Bhuwan Mar 24 '18 at 04:27

Nomis · Answer 2 · 2018-03-23T15:12:21.653

1

Add a box-sizing: border-box; to your td elements, it'll keep the borders in check with your width and height.

td {
  width: 20px;
  box-sizing:border-box;
}

When I checked your codePen, your tds were at 23x20, hence the difference in dimension of your grid.

edited Mar 23 '18 at 15:12

answered Mar 23 '18 at 15:06

Nomis

854
7
11

I'm confused--don't see anything saying 23 in my files. – nCardot Mar 23 '18 at 22:56
It's because without `box-sizing: border-box;`, borders, margin and padding are added to the `width` of the element. So when you ask for an element 20px wide with a 1px border, you end up with an element 22px wide instead (20px+1px border right+1px border left). With `box-sizing: border-box;`, they are taken into account and a 20 px element will be 20px wide(18+1+1px). – Nomis Mar 25 '18 at 16:56
Gotcha, thanks. However, after looking into it a bit more it seems like margins are actually not taken into account when using `box-sizing: border-box`; just the padding and border. – nCardot Mar 25 '18 at 17:54
True ! I rushed my answer, my bad. As you said, `box-sizing: border-box;` take only into account the content, the padding and the border. – Nomis Mar 26 '18 at 08:45

Prevent size distortion of table

2 Answers2