граница ячейки расширяется за пределами

В нижнем углу кода 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

Ожидается, что вы по крайней мере попытаться закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали. –

@ LGSon извините, но ответ Якониса Симоне более подходит в моем случае. –

Нет проблем, просто хотел, чтобы вы выбрали ответ, который лучше всего решил вашу проблему. – 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

граница ячейки расширяется за пределами

ответ

Смежные вопросы