0

The gaps only seem to appear in Chrome and not in Explorer or Firefox. I tried adding border-collapse: collapse but no change.

Gaps only in chrome.

Gaps only in chrome.

let table = `<table>`;
const rows = 4;
const columns = 5;
for (let r = 1; r <= rows; r++) {
  table += `<tr>`;
  for (let c = 1; c <= columns; c++) {
    table += `<td><img src="../images/imageSlices/bcpot002_r${r}_c${c}.jpg" 
    alt="bowl"/></td>`;
  }
  table += `</tr>`
}
table += `</table>`;

td {
  padding: 0px;
  margin: 0px;
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  width: 100%;
  max-height: 100%;
  display: block;
}

Am I missing something here or is there a bug(hopefully with a fix)?

hubofthewest
  • 1
  • 1
  • Tried adding border-collapse to table but no change. – hubofthewest Apr 06 '19 at 08:42
  • The change is real: https://jsfiddle.net/mplungjan/Lnft17h4/ – mplungjan Apr 06 '19 at 11:14
  • 1
    Yeah, I thought that was my problem initially but it's not. It might be a rounding error on chrome due to the irregular sizes of my image slices. I'm using your CSS suggestions but the gaps are still there. Anyway, this was my first question and It seems to be dead so I'll try to write another more succinct one. – hubofthewest Apr 11 '19 at 08:50

1 Answers1

0

You need to specify the border-collapse value for table.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Consider using a CSS Reset stylesheet to make sure things like margins and paddings stays uniform across browsers.

Abhijit Parida
  • 127
  • 1
  • 12