无法将 border-top 和 border-bottom 应用到<tr>标签

Question

我想使用 html 和 css 创建一个类似井字游戏的网格结构。 我无法将顶部和底部边框应用于第二个标签。 有人可以帮忙吗？

 td{ width: 100px; height: 100px; } .MiddleColoumn{ border-left-style: solid; border-left-color: black; border-left-size: 2px; border-right-style: solid; border-right-color: black; border-right-size: 2px; } #MiddleRow{ border-top: 2px solid black; border-color: 2px solid black; }

 <head> </head> <table> <tr> <td></td> <td class="MiddleColoumn"></td> <td></td> </tr> <tr id="MiddleRow"> <td></td> <td class="MiddleColoumn"></td> <td></td> </tr> <tr> <td></td> <td class="MiddleColoumn"></td> <td></td> </tr> </table>

Answer 1

AFAIK，您将无法直接向 tr 添加边框。 相反，设计 td 的样式。 通过改变你的CSS来做这样的事情。

#MiddleRow td{
    border-top: 2px solid black;
    border-color: 2px solid black;
}

Answer 2

像这样尝试

css

#MiddleRow .MiddleColoumn{
  border-top:2px solid black;
  border-bottom:2px solid black;
}

Answer 3

这看起来像是CSS Tables的完美用例，使用：

display: table
display: table-row
display: table-cell

工作示例：

 .table { display: table; } .row { display: table-row; } .cell { display: table-cell; width: 60px; height: 60px; } .row.middle .cell { border-top: 2px solid rgb(0, 0, 0); border-bottom: 2px solid rgb(0, 0, 0); } .cell.center { border-left: 2px solid rgb(0, 0, 0); border-right: 2px solid rgb(0, 0, 0); }

 <div class="table"> <div class="row top"> <div class="cell left"></div> <div class="cell center"></div> <div class="cell right"></div> </div> <div class="row middle"> <div class="cell left"></div> <div class="cell center"></div> <div class="cell right"></div> </div> <div class="row bottom"> <div class="cell left"></div> <div class="cell center"></div> <div class="cell right"></div> </div> </div>

无法将 border-top 和 border-bottom 应用到<tr>标签

问题描述

3 个解决方案

解决方案1
1

解决方案2
0 2020-02-04 09:15:33

解决方案3
0 已采纳 2020-02-04 10:35:09

无法将 border-top 和 border-bottom 应用到<tr>标签

问题描述

3 个解决方案

解决方案1 1

解决方案2 0 2020-02-04 09:15:33

解决方案3 0 已采纳 2020-02-04 10:35:09

解决方案1
1

解决方案2
0 2020-02-04 09:15:33

解决方案3
0 已采纳 2020-02-04 10:35:09