V nižšie uvedenom html / css kóde sa ako hranaté zátvorky použijú ľavé okraje prvých dvoch buniek. Je možné, aby sa hranice zobrazili tak, ako je to zobrazené na obrázku nižšie?
.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>odpovede:
1 pre odpoveď č. 1môžeš použiť
border-radius: 7px;
skryť pravý okraj v centrálnom stĺpci a zobraziť ľavý okraj v pravom stĺpci
.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>0 pre odpoveď č. 2
Na to by ste mohli použiť pseudo elementy, a pretože používajú znak, môžete ich ľahko meniť a tiež ich sfarbiť color spolu s textom rozsahu, ktorý potrebujete.
S týmto riešením budete tiež môcť používať hranice na to, čo sa majú používať.
.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>