How to fix the cells of a table?

[migohunter]

Starting work on the tic tac toe project, I’ve come across a problem where the cells would stretch when I try to input things in it. How do I keep the size of them fixed? I’m trying “table-layout: fixed;” and it still doesn’t work for me.

[SkyC]

You have 40px of padding added to every <td>, so when you add text to the element, the text is inserted and the cell expands to maintain the 40px of padding.

Try starting with this CSS instead, and then modify it from there:

table {
  margin: auto;
  margin-top: 30px;
}

td {
  border: 1px solid black;
  font-size: 30px;  
  height: 90px;
  text-align: center;
  width: 90px;
}

I should mention though, a <table> is primarily meant for storing data. It will work fine, but to be pedantic, a <div> with display: inline-block might be more appropriate for a tic-tac-toe game board.

[DaveC]

In addition to @SkyC’s comment, I’ll mention that vertical-align was designed for table cells. So, you could get away with fixed width and height while centering in both horizontally and vertically.

td {
    border: 1px solid black;
    width: 80px;height: 80px;
    font-size: 30px;

    /* these will center vertically and horizontally */
    text-align: center;
    vertical-align: middle;
}

And, to match up the div comment, you can set a series of divs to display:table-cell, but I think using display:flex will give you more control. All the above will work for you.

[migohunter]

And just like that, the problem is resolved. Thank you both for your help!