CODEWITHSUNDEEP
html
Centr1fuge
Centr1fuge

Reputation: 47

How to stop HTML table cells stretching vertically?

When a cell in the table is clicked, an X appears, which it is supposed to do but I am trying to stop the table cell from stretching vertically when this happens. Once every cell in the column has been clicked, the cells revert to normal size but I need it so the cells never change size.

let turn = false;
function play(cell) {
  if (turn == true) {
    cell.innerHTML = 'X';
  } else {
    cell.innerHTML = 'O';
  }

  if (turn == true) {
    turn = false;
  } else {
    turn = true;
  }
}
td {
  background-color: floralwhite;
  text-align: center;
  width: 50px;
  font-size: 100px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

table {
  table-layout: fixed;
  border-spacing: 25px;
  width: 750px;
  height: 750px;
  background-color: lightseagreen;
  display: inline-table;
}

#grid {
  float: left;
  margin-top: 50px;
  margin-left: 130px;
}
<div id="grid">
  <table>
    <tbody>
      <tr>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
      </tr>
      <tr>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
      </tr>
      <tr>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Views: 2284

Answers (1)

WOUNDEDStevenJones
WOUNDEDStevenJones

Reputation: 5315

HTML tables are supposed to stretch and scale to fit the content that's inside by default. This can be overridden by explicitly defining a height and width. So if you add height: 100px; to the td CSS rule, it will lock in the height of the td to 100px;

BUT WAIT this still doesn't completely fix it because the height of an X or O at 100px font-size makes the cell larger than 100px tall. If you inspect this using your browser's Developer Tools, you can see that once a character is added inside a table cell, the cell height is actually 138px (at least in Chrome on Windows, this likely varies slightly on different browsers). To get around that you can set the height in CSS to be slightly higher, say 150px. Another option is to build this using divs instead which shouldn't auto-expand when you set an explicit height/width.

Per CSS how to make <TD> a fixed height? it looks like the most consistent workaround for this is to add divs inside the cells with fixed height/width rather than setting these values on the td.

let turn = false;

function play(cell) {
  // modified this so you can toggle an empty cell to experiment with heights
  if (cell.innerHTML != '') {
    cell.innerHTML = '';
  } else if (turn) {
    cell.innerHTML = 'X';
  } else {
    cell.innerHTML = 'O';
  }

  turn = !turn;
}
td {
  background-color: floralwhite;
  text-align: center;
  width: 50px;
  font-size: 100px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  height: 138px; /* add this */
}

table {
  table-layout: fixed;
  border-spacing: 25px;
  width: 750px;
  height: 750px;
  background-color: lightseagreen;
  display: inline-table;
}

#grid {
  float: left;
  margin-top: 50px;
  margin-left: 130px;
}
<div id="grid">
  <table>
    <tbody>
      <tr>
        <td onclick="play(this)">X</td>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
      </tr>
      <tr>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
      </tr>
      <tr>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
        <td onclick="play(this)"></td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions