Displaying multiple images in table with pagination

Question

I have the below table which is created through JavaScript - by creating elements, text nodes:

<table>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>D</td>
    <td><img src="" /></td>
  </tr>
</table>

The JavaScript code to create the relevant row(s) with the images, but this just displays the images in sequence:

// obj.images is an array of base64 image strings 
for (const imgString of obj.images) {
  const rows = document.createElement("td");
  const base64 = `data:image/jpeg;base64,${imgString}`;

  const imgElement = document.createElement("img");
  imgElement.src = base64;
  imgElement.width = "300";

  rows.appendChild(imgElement); // rows is a <td> HTML element 
  row.appendChild(rows); // row is a <tr> HTML element, defined outside loop
}

The table will always have 2 headers, A and B, and the rows will have a letter (example: D) and image(s). Problem is, there can be multiple images so in column B, I want to display all the images (which are saved as arrays of base64 strings) in a paginated way where I can scroll left or right to display all images if there are multiple. How can I approach this, preferably with CSS and JavaScript only if possible? The images in column B should ideally be resized to be the same.