표 셀의 안쪽 테두리 만

Question

안쪽 섹션의 표 테두리를 추가하려고합니다. 첫 번째 셀과 마지막 셀에 테두리를 배치하지 않으려합니다.

그래서, 시도 :

.grid > div:last-of-type { 
     border-right: none; 
} 

그러나 이미지에서 볼 수 있듯이, 마지막 셀은 채우기 위해 노력하고 있기 때문에 즉, 이제 나머지 부분보다 5px 큰 패딩을 제거 할 때 빈 공간이 남았습니다 ... 어떻게 패딩을 제거 할 수 있습니까? 그러나 높이를 다른 것과 동일하게 유지하려면 어떻게해야합니까? 어쩌면 그들 모두를 적합하게 늘릴 수있는 방법일까요? 나는 세포의 수를 바꿀 수 있고 높이는 다를 수 있으므로 고정 된 높이를 추가 할 수 없다는 것을 명심하십시오.

나는 그것들을 뻗어서 (굉장한!) border-collapse:collapse;를 추가하려고했지만, 중간의 셀은 다른 두 개의 것보다 약간 작습니다. http://jsfiddle.net/ju76y/5/ (바이올린에 추가 된 이미지) 셀 속성이 추가

.grid { 
    width: 100%; 
    overflow: hidden; 
    background-color: green; 
    display: table; 
    table-layout: fixed; 
    word-wrap: break-word; 

    text-align: center; 
    letter-spacing: 0px; 
    word-spacing: 0px; 
} 

    .grid > div { 
     display: table-cell; 
     vertical-align: top; 
     border-right: 5px solid red; 
    } 

    .grid > div:last-of-type { 
     border-right: none; 
    } 

Answer 1

시도 :

box-sizing:border-box;

Answer 2

이것은 정렬 마지막 사업부를 정렬됩니다 여기

는 JsFiddle입니다 다른 사람들과 적절하게

.grid > div:last-child > div { 
    margin-top: -2px; 
} 

(210) DEMO

같은 필요

는 바이올린을 설정 또한 첫 아이

.grid > div:first-child > div { 
    margin-top: -2px; 
}