How to display bottom border of div's table

Question

I am trying to do a Tic Tac Toe in JS, but at first I would like to create prototype of a board.

User will provide dimensions of a board (5x5 3x3 ect)

The problem is that I cannot set bottom border of the last #row

Could you please let me know what I am doing wrong here? Thank you

 #mainContainer { height: auto; width: auto; border: solid black; border-right-style: none; border-top-style: none; border-bottom-style: none; } #mainContainer>div:last-child { border: solid black; border-right-style: none; border-top-style: none; border-left-style: none; } div.row { display: table-row; width: auto; height: auto; } div.column { display: table-column; width: auto; height: auto; vertical-align: middle; padding: 20px; text-align: center; font-size: 50px; float: left; margin: 0px; border: solid black; border-left-style: none; border-bottom-style: none; }

 <div id="mainContainer"> <div class="row"> <div class="column">1 1</div> <div class="column">1 2</div> <div class="column">1 3</div> </div> <div style="clear: both;"></div> <div class="row"> <div class="column">2 1</div> <div class="column">2 2</div> <div class="column">2 3</div> </div> <div style="clear: both;"></div> <div class="row"> <div class="column">3 1</div> <div class="column">3 2</div> <div class="column">3 3</div> </div> </div>

In browser console I am able to see the border, but when launch a page, bottom border is hidden

Answer 1

You've set border-bottom-style: none for all .column . Set solid for the last row.

 #mainContainer { height: auto; width: auto; border: solid black; border-right-style: none; border-top-style: none; border-bottom-style: none; } #mainContainer>div:last-child { border: solid black; border-right-style: none; border-top-style: none; border-left-style: none; } div.row { display: table-row; width: auto; height: auto; } div.column { display: table-column; width: auto; height: auto; vertical-align: middle; padding: 20px; text-align: center; font-size: 50px; float: left; margin: 0px; border: solid black; border-left-style: none; border-bottom-style: none; }.row:last-child.column {border-bottom-style: solid}

 <div id="mainContainer"> <div class="row"> <div class="column">1 1</div> <div class="column">1 2</div> <div class="column">1 3</div> </div> <div style="clear: both;"></div> <div class="row"> <div class="column">2 1</div> <div class="column">2 2</div> <div class="column">2 3</div> </div> <div style="clear: both;"></div> <div class="row"> <div class="column">3 1</div> <div class="column">3 2</div> <div class="column">3 3</div> </div> </div>

Answer 2

Add border-bottom to div.row:last-child.column :

div.row:last-child .column {
  border-bottom: solid black;
}

 #mainContainer { height: auto; width: auto; border: solid black; border-right-style: none; border-top-style: none; border-bottom-style: none; } #mainContainer>div:last-child { border: solid black; border-right-style: none; border-top-style: none; border-left-style: none; } div.row { display: table-row; width: auto; height: auto; } div.column { display: table-column; width: auto; height: auto; vertical-align: middle; padding: 20px; text-align: center; font-size: 50px; float: left; margin: 0px; border: solid black; border-left-style: none; border-bottom-style: none; } div.row:last-child.column { border-bottom: solid black; }

 <div id="mainContainer"> <div class="row"> <div class="column">1 1</div> <div class="column">1 2</div> <div class="column">1 3</div> </div> <div style="clear: both;"></div> <div class="row"> <div class="column">2 1</div> <div class="column">2 2</div> <div class="column">2 3</div> </div> <div style="clear: both;"></div> <div class="row"> <div class="column">3 1</div> <div class="column">3 2</div> <div class="column">3 3</div> </div> </div>

Codepen: https://codepen.io/manaskhandelwal1/pen/vYyBGmN

Answer 3

you have put a

border-bottom-style: none

to your div.column

you can also remove all the style of the #mainContainer>div:last-child. it won't change anything

Answer 4

This won't solve your problem as it has been already solved by others. Though a suggestion would be to leverage display:grid and following styling in your case. Will really reduce the nesting and css required.

 #mainContainer { display: grid; grid-template-columns: repeat(3,1fr); border-left: solid black; border-top: solid black; } div.cell { vertical-align: middle; padding: 20px; text-align: center; font-size: 50px; border-right: solid black; border-bottom: solid black; }

 <div id="mainContainer"> <div class="cell">1 1</div> <div class="cell">1 2</div> <div class="cell">1 3</div> <div class="cell">2 1</div> <div class="cell">2 2</div> <div class="cell">2 3</div> <div class="cell">3 1</div> <div class="cell">3 2</div> <div class="cell">3 3</div> </div>

You can even edit the no of columns by using JS like so:-

mainContainer.style.gridTemplateColumns = `repeat(${columns},1fr)`;