单元格边框扩展超出

在下面的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>

来源

2017-02-14 Kaizar Laxmidhar

预计你至少尝试为自己的代码这一点。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

@LGSon对不起，但Iaconis Simone的答案更适合我的情况。 –

没问题，只是想让你选择一个答案，最好的解决了你的问题 – LGSon

可以使用

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>

来源

2017-02-14 16:55:24

谢谢你的回应。只是为了澄清我不能为此目的交换边界，因为我有特定的用例，只能使用特定的边界，如问题中提到的那样。但是你使用边界半径的建议可以解决问题。 –

你可以使用伪元素来做到这一点，而且因为他们使用的字符，你可以很容易地改变与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>

来源

2017-02-14 17:07:18 LGSon

单元格边框扩展超出

回答

相关问题