单元格边界扩展超出

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;

隐藏中间栏的右边框，显示右栏的左边框

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

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

Answer 2

您可以使用伪元素来做到这一点，并且由于它们使用字符，您可以轻松地更改它们，还可以使用 color 以及您需要的任何范围文本为它们着色。

此外，通过此解决方案，您将能够按预期使用边框。

.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%;
}

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

单元格边界扩展超出

cell border expand beyond

css

curve

cell