html - 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>

question from:https://stackoverflow.com/questions/65925085/how-to-display-bottom-border-of-divs-table

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>