html – Methods to stop desk cells wrapping prematurely

Within the following instance, what’s inflicting the final desk cell to wrap to a brand new line when there usually are not sufficient cells to achieve to the suitable aspect of the web page and there may be loads of room left horizontally to accommodate the final cell, but when there are a lot of cells which attain to the suitable aspect of the web page and the row wraps as meant, the final cell now not wraps? I do not need the final cell to wrap until it’s the last cell within the desk which does not match horizontally within the web page.

All the time when there are fewer cells than what match horizontally throughout the web page, the final cell wraps. For instance, as an example 14 cells match horizontally throughout the web page. If there are 13 cells to show, 12 will show on the primary line and the thirteenth cell will wrap to a second line. If there are 5 cells to show, 4 will show on the primary line and the fifth cell will wrap to a second line.

HTML

<div id='web page'>

<!--Different web page contents-->

  <desk id='exampleTable'>
    <tr>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
    </tr>
  </desk>

<!--Different web page contents-->

</div>

CSS

#web page {
  width: 60%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f2f2f2;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  font-size: 12px;
}

#exampleTable {
  max-width: 95%;
}

#exampleTable td {
  show: inline-block;
  background-color: white;
  width: 60px;
  margin: 5px;
  padding: 0.3%;
  text-align: middle;
  font-weight: daring;
  font-size: 12px;
}

I’ve tried a number of completely different show attributes however show: inline-block; is the one one which works when there are extra cells than match throughout the web page horizontally. I’ve additionally tried placing the desk inside its personal container however that makes no distinction.

The desk cells are search outcomes, so I would like an answer that works for all potentialities, whether or not there are just a few outcomes, or many outcomes displayed.

Instance with not sufficient cells to achieve the suitable aspect of the web page.
https://jsfiddle.web/wildragon/Leoxyn6w/

Instance with many cells that attain the suitable aspect of the web page, then wrap.
https://jsfiddle.web/wildragon/Leoxyn6w/1/