Я получаю нарушенную границу ячейки таблицы в Chrome (в Safari не появилась), когда использую «border-collapse: collapse».
код ниже.
Я использовал реактивные компоненты, которые могут бытьполучил 'props' с именем 'processing', и цвет границы изменяется в соответствии с изменением 'processing'
<div className="processing-table-wrapper">
<table className="processing-form-table">
<tbody>
<tr>
<ProcessingLabel processing={processingState===0 ? true: false}><b>라스트/패턴</b><br/>(1단계)
</ProcessingLabel>
<ProcessingLabel processing={processingState===1 ? true: false}><b>재단</b><br/>(2단계)
</ProcessingLabel>
<ProcessingLabel processing={processingState===2 ? true: false}><b>갑피</b><br/>(3단계)
</ProcessingLabel>
<ProcessingLabel processing={processingState===3 ? true: false}><b>저부</b><br/>(4단계)
</ProcessingLabel>
<ProcessingLabel processing={processingState===4 ? true: false}><b>제작완료</b>
</ProcessingLabel>
</tr>
<tr>
<ProcessingValue processing={processingState===0 ? true: false}>
{processingState == 0 ? <div><div className="complete-button" onClick={() => {onPatchProcessingNext(id, "lastComplete")}}>완료</div></div> : lastComplete}
</ProcessingValue>
<ProcessingValue processing={processingState===1 ? true: false}>
{processingState == 1 ? <div><div className="complete-button" onClick={() => {onPatchProcessingNext(id, "cutComplete")}}>완료</div><div className="complete-button" onClick={() => {onPatchProcessingPre(id, "lastComplete")}}>전단계취소</div></div> : cutComplete}
</ProcessingValue>
<ProcessingValue processing={processingState===2 ? true: false}>
{processingState == 2 ? <div><div className="complete-button" onClick={() => {onPatchProcessingNext(id, "upperComplete")}}>완료</div><div className="complete-button" onClick={() => {onPatchProcessingPre(id, "cutComplete")}}>전단계취소</div></div> : upperComplete}
</ProcessingValue>
<ProcessingValue processing={processingState===3 ? true: false}>
{processingState == 3 ? <div><div className="complete-button" onClick={() => {onPatchProcessingNext(id, "soleComplete")}}>완료</div><div className="complete-button" onClick={() => {onPatchProcessingPre(id, "upperComplete")}}>전단계취소</div></div> : soleComplete}
</ProcessingValue>
<ProcessingValue processing={processingState===4 ? true: false}>
{processingState == 4 ? <div><div>제작완료</div><div className="complete-button" onClick={() => {onPatchProcessingPre(id, "soleComplete")}}>전단계취소</div></div> : null}
</ProcessingValue>
</tr>
</tbody>
</table>
</div>
css ниже.
Сначала компонент css использует пакет 'styled-components'.
const ProcessingLabel = styled.td`
position: relative;
font-size: 0.9rem;
height: 3rem;
width: 20%;
border: 2px solid #d8d6d6;
${props => props.processing ? "border-left: 3px solid red; border-right: 3px solid red; border-top: 3px solid red;" : null}
text-align: center;
`
Во-вторых, таблица css
.processing-form-table {
position: relative;
width: 100%;
border-collapse: collapse;
}
снимок экрана ниже.
снимок экрана
Я искаженграница, когда я меняю вид в соответствии с изменением «реквизит» (обработка)