입력 텍스트의 테두리 간격 100 %

셀의 100 % 인 입력 텍스트가있는 양식이 있습니다. 또한 테두리를 접어서 간격을 0 픽셀로 설정했습니다. 나는 여전히 세포들 사이의 틈새를 보았다. 입력 간의 이러한 갭을 제거하려면 어떻게해야합니까? 나는 느슨하게 스프레드 시트를 모방하려고 노력하고있다.입력 텍스트의 테두리 간격 100 %

강령 (https://jsfiddle.net/djyk8927/ ) :

#requestorTable{ 
 
    border-collapse:collapse; 
 
    border-spacing:0px; 
 
} 
 
input[type="text"] { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing: border-box; 
 
    border:1px solid #919295; 
 
}

<table id='requestorTable'> 
 
    <tr> 
 
    <td> 
 
     <input type='text' id='item1' name='item1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' id='qty1' name='qty1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' id='price1' name='price1'> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type='text' id='item2' name='item2'> 
 
    </td> 
 
    <td> 
 
     <input type='text' id='qty2' name='qty2'> 
 
    </td> 
 
    <td> 
 
     <input type='text' id='price2' name='price2'> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type='text' id='item3' name='item3'> 
 
    </td> 
 
    <td> 
 
     <input type='text' id='qty3' name='qty3'> 
 
    </td> 
 
    <td> 
 
     <input type='text' id='price3' name='price3'> 
 
    </td> 
 
    </tr> 
 
</table>

출처

2016-11-12 bart2puck

- https://jsfiddle.net/dj yk8927/1/ –

요소에는 이와 관련된 일부 기본 스타일이 있습니다. 그래서 당신은 그들을 무시해야합니다. 이 경우에는 td와 연결된 패딩이 있습니다. 0으로 재설정하면 수정해야합니다. – Sreekanth

이것은 당신이 얻으려고했던 것입니까? https://jsfiddle.net/djyk8927/6/ –

당신은 세포에서 패딩을 제거해야

(테이블 데이터) https://jsfiddle.net/djyk8927/5/

td { 
    padding: 0px; 
}

JSFiddle 수정

출처

2016-11-12 21:48:10

perfect. 어떤 생각을 두 번 테두리를 제거하는 방법? – bart2puck

jQuery를 사용하여 각 입력 요소에 상대적으로 테두리를 지정하거나 입력 요소 테두리를 제거하고 테이블 테두리를 사용하십시오. –

위대한. 고맙습니다. – bart2puck

입력 텍스트의 테두리 간격 100 %

답변

관련 문제