CODEWITHSUNDEEP
htmlcss
Sanchit Bajaj
Sanchit Bajaj

Reputation: 35

Unable to apply border-top and border-bottom to the <tr> tag

I want to create a tic-tac-toe like grid structure using html and css. I am unable to apply top and bottom border to the second tag. Can someone help with this? 

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>

Upvotes: 1

Views: 1568

Answers (3)

Rounin
Rounin

Reputation: 29463

This looks like a perfect use case for CSS Tables, using:

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

Working Example:

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

Upvotes: 0

Ranjith v
Ranjith v

Reputation: 1062

try like this

css

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

Upvotes: 0

user12827814
user12827814

Reputation:

AFAIK, you wont be able to add border to tr directly. Instead, style the td's. Something like this by changing your CSS.

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

Upvotes: 1

Related Questions