如何显示div表格的底部边框

Question

我正在尝试在 JS 中进行井字游戏，但起初我想创建一个板的原型。

用户将提供板的尺寸（5x5 3x3 等）

问题是我无法设置最后一个#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; }

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

您已经为所有.column设置了border-bottom-style: none 。 为最后一行设置solid 。

 #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

将border-bottom添加到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>

代码笔： https://codepen.io/manaskhandelwal1/pen/vYyBGmN

Answer 3

你放了一个

border-bottom-style: none

到你的 div.column

您还可以删除#mainContainer>div:last-child 的所有样式。 它不会改变任何东西

Answer 4

这不会解决您的问题，因为它已经被其他人解决了。 尽管建议在您的情况下利用display:grid和以下样式。 将真正减少所需的嵌套和 css。

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

您甚至可以像这样使用 JS 来编辑columns ：-

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