CODEWITHSUNDEEP
htmlcss
joysticko
joysticko

Reputation: 39

How to display bottom border of div's table

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

Upvotes: 1

Views: 64

Answers (4)

Lakshya Thakur
Lakshya Thakur

Reputation: 8308

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)`;

Upvotes: 0

Luckyluchie
Luckyluchie

Reputation: 23

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

Upvotes: 0

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

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

Upvotes: 0

pavel
pavel

Reputation: 27072

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>

Upvotes: 4

Related Questions