How to fix the cells of a table?

#1

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.

How do I stop a td and tr element inside of a table element from expanding?
#3

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. :slight_smile:

2 Likes
#4

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

#5