时间戳

首页 > 解决方案 > 无法将border-top 和border-bottom 应用于标签

html - 无法将border-top 和border-bottom 应用于标签

问题描述

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

标签： htmlcss

解决方案

AFAIK，您将无法直接向 tr 添加边框。相反，为 td 设置样式。通过更改您的 CSS 来实现类似的效果。

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

推荐阅读