4

I have a question about my HTML table. I used JavaScript to add eight rows and eight columns to a table I defined with HTML. I also used CSS to format the cells and images that go inside the cells. The issue is that the larger I make the screen, the more warped the table cell sizes become in comparison to the static image behind them (I have a Chess Board image behind chess pieces).

I have done all the CSS tricks I could find online to eliminate unwanted padding etc. but nothing seems to work for this problem. The offset is consistent and noticeable, but it is only about 2 or 3 pixels.

This is where the bottom-right pieces are supposed to be, centered in their squares:

This is when the screen is small, the bottom-right pieces are centered in their squares.

This is where they are when the screen is large; they're slightly offset:

This is when the screen is large, the pieces have been pushed right.

Here is my HTML:

<body oncontextmenu="return false;">
  <div id="Board"></div>
  <table id="Pieces"></table>
</body>

Here is the JavaScript:

var P = document.getElementById("Pieces");
for (var y = 0; y < 8; y++) {
  P.appendChild(document.createElement("tr"));
  for (var x = 0; x < 8; x++) P.rows[y].appendChild(document.createElement("td"));
}
// in some more complex JS I place an "img" element of each piece in their respective "td"s

This is the CSS, which I suspect is the issue:

body {
  font-family: sans-serif;
  user-select: none;
  -moz-user-select: none;
  overflow: hidden;
  --unit: 60px; /* this is set according to screen height with some simple JS */
}
* {
  margin: 0;
  padding: 0;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  box-sizing: border-box;
}
#Board {
  position: absolute;
  left: calc(50% - var(--unit) * 4);
  top: var(--unit);
  background-image: url("boardWhite.png");
  background-size: calc(var(--unit) * 8) calc(var(--unit) * 8);
  width: calc(var(--unit) * 8);
  height: calc(var(--unit) * 8);
  background-color: red;
}
table {
  position: fixed;
  left: calc(50% - var(--unit) * 4);
  top: var(--unit);
  border-collapse: collapse;
}
td {
  width: var(--unit);
  height: var(--unit);
}
img {
  width: var(--unit);
}

Any help would be greatly appreciated! Here is some additional information you may need to diagnose the problem:

  • The blue board in the back is an image that's size is set according to --unit.
  • Unit does not update when the screen is re-sized, it is only set once.
  • The img elements are inside the td elements, which are inside tr then table.
  • I have found that the extra width per td is exactly half a pixel.

Thank you so much for your efforts.

Josiah Plett
  • 180
  • 14
  • You can try to reload document, if window is resized. This may help - https://stackoverflow.com/questions/14915653/refresh-page-on-resize-with-javascript-or-jquery – T.Shah Nov 19 '19 at 06:38
  • I would try the following: `td {vertical-align: top;};` and `img {margin: calc((var(--unit) - (var(--unit) * 0.92)) / 2) auto;}` – Artur Noetzel Nov 19 '19 at 08:19
  • The thing is your calculation: e.g. 60px * 0.92 and 60px * 0.035 will almost always output a floating value. In this case it is up to the browser how to render this, since there are no parts of a pixel. This is where your offset is coming from most probably. – Artur Noetzel Nov 19 '19 at 08:24
  • oh, and set your img to `display:block;` or the code I posted before will not center it within the td. – Artur Noetzel Nov 19 '19 at 08:26
  • @ArturNoetzel Thanks for the input. The margin and width calculations were there from a failed attempt to fix the alignment issue, so I've edited them out for clarity. – Josiah Plett Nov 19 '19 at 15:18

0 Answers0