HTML table stretches and not allow overflow-CodePudding

I'm currently building a web app with vuetify, and i'm having an issue with a table that is taking me a lot of time. I'd like to have like a scroller on mobile that allow you to see the table while keeping the aspect ratio and not stretching itself. I'll post the code down here and a picture of how the table is showed in a mobile view. I already tried adding overflow: auto and overflow: scroll but nothing it's changing. Can you help me? Code:

<table id="tabellaPunteggi" style="overflow-x:auto;">
      <tbody>
        <tr>
          <td  colspan="3">Buca</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>=</td>
          <td> /-</td>
        </tr>
        <tr>
          <td  colspan="3">PAR</td>
          <td>5</td>
          <td>4</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>4</td>
          <td>4</td>
          <td>5</td>
          <td>3</td>
          <td>5</td>
          <td>4</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>4</td>
          <td>4</td>
          <td>5</td>
          <td>3</td>
          <td>72</td>
          <td></td>
        </tr>
        <tr>
          <td  colspan="3">Score</td>
          <td>4</td>
          <td>4</td>
          <td>5</td>
          <td>5</td>
          <td>3</td>
          <td>7</td>
          <td>5</td>
          <td>4</td>
          <td>3</td>
          <td>9</td>
          <td>4</td>
          <td>3</td>
          <td>5</td>
          <td>4</td>
          <td>9</td>
          <td>5</td>
          <td>3</td>
          <td>3</td>
          <td></td>
          <td>-9</td>
        </tr>
      </tbody>
    </table>
<!-- Here is the table -->

And the css i tried using:

table#tabellaPunteggi{
  margin: 0 auto;
  border-collapse: collapse;
}

table#tabellaPunteggi tr td:not(.remove){
  width: 45px;
  height:45px;
}

table#tabellaPunteggi tr td {
  border: solid 1px black;
}

table#tabellaPunteggi tr td.remove {
  width: 75px;
}

Any help is appreciated! Thanks for your time! Have a nice day!

CodePudding user response：

Set a min width on the td you don't need the :not(.remove) since you set the width for .remove afterwards.

table#tabellaPunteggi tr td{
  min-width: 45px;
  height: 45px;
}

table#tabellaPunteggi tr td.remove {
  min-width: 75px;
}

This will keep things as is

CodePudding user response：

just update your this css lines as i updated for you

table#tabellaPunteggi{ border-collapse: collapse; overflow: hidden; min-width:500px }