CSS 테이블 nthchild()가 마지막으로 td에 테두리가 표시되지 않습니다.

Question

테이블 td를 테두리가있는 테두리와 아래 테두리가없는 테두리로 표시하려고합니다. 모든 것이 작동하지만 테이블의 마지막 부분에있을 때는 경계선이 작동하지 않습니다.

또한 전혀 IE에서 작동하지 않습니다 :

.moduletablehome table tbody tr td:nth-child(odd) { 
    margin: 4px; 
    padding: 4px; 
    border-right: 1px solid; 
    border-bottom: 1px dotted; 
    overflow: hidden; 
} 
.moduletablehome table tbody tr td:nth-child(even) { 
    margin: 4px; 
    padding: 4px; 
    border-bottom: 1px dotted; 
    overflow: hidden; 
} 

을 여기하는 것은 jsfiddle 링크입니다 : jsfiddle.net/EC6dW/2.

Answer 1

, 나는 내가 TD 모두의

에서 경계 바닥

을 그럴 필요에 점선 제거 경계 바닥을 준 솔루션,

있어

Answer 2

나는 아래쪽에 테두리가없는 테이블 하나를 표시하려고합니다.

코드에 두 가지 경우의 아래쪽 테두리가 지정되어 있으므로 원하는지 확실하지 않습니다. 당신이 그것을 가지고 있기 때문에, 홀수와 짝수의 차이는 border-right에 있으므로 아마도 border-bottom과 border-right? 사이를 바꿀 작정이었을 것입니다.

최소 필요하다고 생각한 내용으로 jsfiddle을 정리했습니다. http://jsfiddle.net/EC6dW/5/과 내가 귀하의 CSS에서 기대했던 것을 보았습니다. (나는 심지어 1px solid 대신에을 jsfiddle에서 사용한 것처럼 사용하도록 TDS를 변경했습니다.)

Answer 3

IE에서이 기능을 사용하려면 Javascript/JQuery를 사용해야합니다. 여기

마침내 빠른 튜토리얼 http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere