單元格邊框擴展超出

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

單元格邊框擴展超出

回答

相關問題