Tic-Tac-Toe table border problem for game table

Tic-Tac-Toe table border problem for game table


Hello folks ,

I am currently working on the Tic-Tac-Toe project. I just created the layout and UI part. Here is my codepen link https://codepen.io/scodek/pen/gogEeM,

I am getting a problem regarding my css for table border. I want to make it look like proper Tic-Tac-Toe board and hence applied the following code in my css,

tr:first-child td{
border-top:0 ;

tr:last-child td{
border-bottom:0 ;

tr td:first-child{

border-left:0 ;


tr td:last-child{
border-right:0 ;

It should set the top,bottom,left,right border of my game table to zero. However, it’s not working. I tried hard but couldn’t find what I am missing. I thought pair programming might help. It would be great if you please have a look and suggest what I overlooked.


You mean you want to make it look like a large # symbol? Try removing the .table-row border.


Hey Kev …

Thank you ! it worked like a charm ! However, I couldn’t understand how without the row border given, the row border is appearing perfectly. Do you have any idea ?


The row borders are what’s causing that apparent border around the table. You can try playing around by changing its color to red and reducing the .table-col borders to 1px to see how the different borders affect the appearance. Sorry I can’t think of any simpler explanation.