How to prevent table cells wrapping prematurely

Issue

In the following example, what is causing the last table cell to wrap to a new line when there are not enough cells to reach to the right side of the page and there is plenty of room left horizontally to accommodate the last cell, but if there are many cells which reach to the right side of the page and the row wraps as intended, the last cell no longer wraps? I don't want the last cell to wrap unless it is the final cell in the table which doesn't fit horizontally in the page.

Always when there are fewer cells than what fit horizontally across the page, the last cell wraps. For example, let's say 14 cells fit horizontally across the page. If there are 13 cells to display, 12 will display on the first line and the 13th cell will wrap to a second line. If there are 5 cells to display, 4 will display on the first line and the 5th cell will wrap to a second line.

HTML

<div id='page'>

<!--Other page contents-->

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

<!--Other page contents-->

</div>

CSS

#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 {
  display: inline-block;
  background-color: white;
  width: 60px;
  margin: 5px;
  padding: 0.3%;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}

I've tried several different display attributes but display: inline-block; is the only one that works when there are more cells than fit across the page horizontally. I've also tried putting the table inside its own container but that makes no difference.

The table cells are search results, so I need a solution that works for all possibilities, whether there are only a few results, or many results displayed.

Example with not enough cells to reach the right side of the page. https://jsfiddle.net/wildragon/Leoxyn6w/

Example with many cells that reach the right side of the page, then wrap. https://jsfiddle.net/wildragon/Leoxyn6w/1/

Solution

This has nothing to do with the number of cells. Inline block elements always wrap like that (See this Q&A). Switching table elements to a display value other than their default is not a good idea (tables don't wrap like that, they're "tables"). A better option is to chose an alternative layout method such as flexbox or CSS-Grid.

CSS-Grid alternative

body {
  padding: .5em;
}

.grid-container {
  display: grid;
}

.grid-container--fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-element {
  background-color: deepPink;
  padding: .5em;
  color: #fff;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
}

body {
  padding: 1em;
}

<div class="grid-container grid-container--fill">
  <div class="grid-element">foobar</div>
  <div class="grid-element">Lorem ipsum dolor sit.</div>
  <div class="grid-element">foobar</div>
  <div class="grid-element">foobar</div>
  <div class="grid-element">foobar</div>
  <div class="grid-element">foobar</div>
  <div class="grid-element">foobar</div>
</div>

Answered By - Paulie_D