Zellgrenze erweitern über

Im unteren HTML/CSS-Code linken Grenzen der ersten beiden Zellen werden als Bereich Klammern verwendet. Ist es möglich, dass die Ränder wie im Screenshot gezeigt aussehen?Zellgrenze erweitern über

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

Quelle

2017-02-14 Kaizar Laxmidhar

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –

@LGSon tut mir leid, aber Iaconis Simones Antwort ist in meinem Fall besser geeignet. –

Kein Problem, wollte nur, dass Sie eine Antwort wählen, die Ihr Problem am besten gelöst – LGSon

können Sie

border-radius: 7px;

verstecken rechten Rand in zentralen Säule und zeigen linken Rand in der einen rechten Seite

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

Quelle

2017-02-14 16:55:24

danke für die Antwort. Nur um klarzustellen, kann ich die Grenzen zu diesem Zweck nicht austauschen, da ich einen spezifischen Anwendungsfall habe, bei dem nur spezifische Grenzen verwendet werden können, wie in der Frage erwähnt. Aber Ihr Vorschlag zur Verwendung von Border-Radius wird den Trick tun. –

könnten Sie Pseudo-Elemente verwenden, das zu tun, und da sie ein Zeichen verwenden, können Sie leicht ändern und sie auch mit color zusammen mit einem beliebigen Bereich Text Farbe, die Sie benötigen.

Mit dieser Lösung können Sie auch die Rahmen verwenden, für die sie verwendet werden sollen.

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

Quelle

2017-02-14 17:07:18 LGSon

Zellgrenze erweitern über

Antwort

Verwandte Themen