Невозможно применить border-top и border-bottom к тегу <tr> - PullRequest
Новая
       0

Невозможно применить border-top и border-bottom к тегу <tr>

1 голос
/ 04 февраля 2020

Я хочу создать структуру сетки типа ti c -ta c, используя 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>

Ответы [ 3 ]

1 голос
/ 04 февраля 2020

AFAIK, вы не сможете добавить границу к tr напрямую. Вместо этого, стиль тд. Примерно так: сменив свой CSS. 

#MiddleRow td{
    border-top: 2px solid black;
    border-color: 2px solid black;
}
0 голосов
/ 04 февраля 2020

Это выглядит как идеальный вариант использования для 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>
0 голосов
/ 04 февраля 2020

попробуй вот так

css

#MiddleRow .MiddleColoumn{
  border-top:2px solid black;
  border-bottom:2px solid black;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...