无法将border-top 和border-bottom 应用于<tr> 标签答案

【问题标题】：Unable to apply border-top and border-bottom to the <tr> tag无法将border-top 和border-bottom 应用于<tr> 标签
【发布时间】：2020-05-20 01:56:02
【问题描述】：

我想使用 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>

【问题讨论】：

这能回答你的问题吗？ Giving a border to an HTML table row, <tr>
不赞成使用table 元素的原因是它的行为方式出乎意料。我推荐使用 CSS Grid，或者，如果你需要更多的向后兼容性，可以使用 Flexbox。

标签： html css

【解决方案1】：

AFAIK，你不能直接给 tr 添加边框。相反，为 td 设置样式。通过更改 CSS 来实现类似的效果。

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案3】：

这样试试

css

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

【讨论】：