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

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

#1

When I add text content to my td element, inside of table and tr elements, the td and tr expands with the text content, but I want the size of them to stay the same. I found this thread with the same problem as me How to fix the cells of a table? and it was solved by setting the height and width of the td element, but I tried that and it’s not working, I’m not sure why.
I have tried setting my tables css to table-layout fixed, tried using overflow: hidden on both the td element on table and nothing has worked. I will appreciate any help with this. My project: https://codepen.io/icewizard/pen/XEMmGZ


#2

When you add text inside a td element the following CSS is causing the content to shift ever so slightly. Comment out this CSS and see how it does not shift. What is your purpose of using the ::after pseudo-element?

  td::after {
    content: '';
    display: block;
    margin-top: 100%;
  }

#3

thanks I didn’t know that was causing it and removing it looks the same.


#4

But why did you even add it to begin with? What did you think it was going to do for you?


#5

I got some of the html from a guide on how to make a responsive tictactoe board, but that part isnt needed for what I’m trying to do.