细胞边界扩展到更远

Question

在下面的html / css代码中，前两个单元格的左边框用作范围括号。是否可以使边框显示如下面的屏幕截图所示？

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 5px;
}

.Column {
  display: table-cell;
  border-style: solid;
}

.Column:nth-child(1) {
  width:20%;
  border-left: none;
  border-top: none;
  border-bottom: none;  
}
.Column:nth-child(2) {
  width:50%;
  border-left: none;
  border-top: none;
  border-bottom: none;
  text-align: center;
}
.Column:nth-child(3) {
  width:30%;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

<div class="Row">
  <div class="Column"></div>
  <div class="Column">Accepted Range</div>
  <div class="Column"></div>
</div>

Answer 1

你可以使用

border-radius: 7px;

隐藏中央列中的右边框，并在右侧显示左边框

＆＃13;

＆＃13;

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 5px;
}

.Column {
  display: table-cell;
  border-style: solid;
  border-radius: 7px;
}

.Column:nth-child(1) {
  width:20%;
  border-left: none;
  border-top: none;
  border-bottom: none;  
}
.Column:nth-child(2) {
  width:50%;
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-right:none;
  text-align: center;
}
.Column:nth-child(3) {
  width:30%;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

＆＃13;

<div class="Row">
  <div class="Column"></div>
  <div class="Column">Accepted Range</div>
  <div class="Column"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用伪元素来执行此操作，并且由于它们使用了字符，因此您可以轻松更改并使用color以及所需的任何范围文本对其进行着色。

此外，使用此解决方案，您将能够使用边框来使用它们。

＆＃13;

＆＃13;

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 5px;
}

.Column {
  position: relative;
  display: table-cell;
}

.Column:nth-child(1) {
  width:20%;
}
.Column:nth-child(2) {
  width:50%;
  text-align: center;
}
.Column:nth-child(3) {
  width:30%;
}
.Column:nth-child(1)::before,
.Column:nth-child(3)::before {
  content: '❳';
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  position: absolute;
}
.Column:nth-child(3)::before {
  content: '❲';
  left: auto;
  right: 100%;
}

＆＃13;

<div class="Row">
  <div class="Column"></div>
  <div class="Column">Accepted Range</div>
  <div class="Column"></div>
</div>

＆＃13;

＆＃13;

＆＃13;