Zawijanie się tabeli

Zrobiłem prostą gierkę i chciałem zrobić wersję mobilną strony. Wymyśliłem sobie, że informacje o wyniku będą miały szerokość strony i zawsze będą widoczne, natomiast plansza 15 na 15 pól w razie potrzeby będzie można przesuwać suwakiem w poziomie. Plansze mam zrobioną w tabeli i jeżeli strona jest zbyt wąska to zamiast pojawiającej się możliwości przesuwania plansza się zwija. Co zrobić? Może zamiast tabeli użyć div?

Pokaż, co masz. Twój opis efektu niewiele wyjaśnia.

Plansza w przeglądarce jak szerokość jest odpowiednia wygląda tak

A gdy jest zbyt wąska to wygląda tak

Chodzi mi o to, aby plansza gdy jest zbyt wąsko się nie zwinęła tylko pozostała w pierwotnym ustawieniu, natomiast chciałbym aby pojawił się pasek przewijania poziomo.

js:

for(var i=0; i<15; i++){
        for(var j=0; j<15; j++){
            nazwa="pole["+j+"]["+i+"]";
                nazwaG="wiersz"+i;
                var elG;
                if(j==0){
                      elG = document.createElement("tr");
                    elG.id = nazwaG;
                    game.appendChild(elG);
                }
                else{
                    elG = document.getElementById(nazwaG);
                }
                const el = document.createElement("td");
                el.id = nazwa;
                el.classList.add("pola");
                nazwa="wybor("+j+", "+i+");";
                el.setAttribute( 'onclick', nazwa );
                elG.appendChild(el);
            }
        }
    }

css

.pola
{
    float: left;
    background-color:cornflowerblue;
    width: 35px;
    height: 35px;
    border-width: 5px;
    border-color: lightgray;
    border-style: solid;
    font-size: 35px;
    text-align: center;
    font-weight: 900;
    color: white;
}

Wyrzuć float: left i zamiast tego twórz nowy wiersz, a w nim np. piętnaście elementów (komórek (td)).

body {
  margin: 0;
  padding: 0;
}
td {
  border: 1px solid black;
}
table {
  width: 100%;
}

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
    <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
  </tr>
</table>

Taki sam CSS, co wyżej, ale inny HTML z JavaScript (JS):

<table id="dynamically_created_body"></table>

const squares_per_row = 15;
const rows = 4;
for(let j=0;j<rows;j++) {
  let tr = document.createElement('tr');
  document.getElementById('dynamically_created_body').appendChild(tr);
  for(let i=0;i<squares_per_row;i++) {
    let td = document.createElement('td');
    td.textContent = 'x';
    tr.appendChild(td);
  }
}

Wrzuć tabelę do DIV-a:
https://www.w3schools.com/howto/howto_css_table_responsive.asp

Znalazłem przyczynę, po usunięciu float:left trzeba było zmienić jeszcze width: 35px; na min-width: 35px