세포 테두리가 넘어서 확장

아래의 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) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –

@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>

0123에 남아 경계를 표시 사용할 수 있습니다

출처

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

답변

관련 문제