css - td 요소의 테두리 오른쪽 오버플로 경계선 아래쪽

Question

나는 테두리가 적용된 tdtr을 원한다면 테이블을 가져 와서 그 안에 td 요소에 테두리를 적용했습니다. td 요소가 들어 있지만 오른쪽 테두리는 td이며 맨 아래 경계선에 있으므로 모서리가 색상을 변경하지 않습니다. 어떤 아이디어?

CSS

.advertisements table { 
    text-align: center; 
    font-size: 16px; 
    border-collapse: collapse; 
    width: 100%; 
    margin-top: 10px; 
} 
.advertisements table td { 
    border: 2px solid #F3FAFF; 
    padding: 10px; 
} 
.advertisements table tr { 
    background-color: #9EC630; 
    background: -moz-linear-gradient(#9EC630, #87AB29); 
    background: -o-linear-gradient(#9EC630, #87AB29); 
    background: -webkit-linear-gradient(#9EC630, #87AB29); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9EC630), color-stop(1, #87AB29)); 
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#9EC630, EndColorStr=#87AB29)"; 
    background: linear-gradient(#9EC630, #87AB29); 
} 
.advertisements table tr:not(:first-child):hover { 
    background-color: #B8D669; 
    background: -moz-linear-gradient(#B8D669, #9EC630); 
    background: -o-linear-gradient(#B8D669, #9EC630); 
    background: -webkit-linear-gradient(#B8D669, #9EC630); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B8D669), color-stop(1, #9EC630)); 
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#B8D669, EndColorStr=#9EC630)"; 
    background: linear-gradient(#B8D669, #9EC630); 
} 
.advertisements table tr:not(:first-child):hover td { 
    border-top: 2px solid #1A446C; 
    border-bottom: 2px solid #1A446C; 
    cursor: pointer; 
} 
.advertisements table tr:not(:first-child):hover td:first-child { 
    border-left: 2px solid #1A446C; 
} 
.advertisements table tr:not(:first-child):hover td:last-child { 
    border-right: 2px solid #1A446C; 
} 
.advertisements table tr td ~ table tr:not(:first-child):hover { 
    border-top: none; 
} 
.advertisements table tr:first-child:hover { 
    cursor: default; 
} 

HTML :

<div class="advertisements"> 
    <table> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    </table> 
</div> 

소스가 여기에 있습니다 : http://dabblet.com/gist/c0a22609e6139ad83546는

Answer 1

귀하의 질문에 대한 답변은 방법 브라우저 resolve border conflicts에있다.

당신은 조금 넓게, 또는 변경할 tr 경계를 설정할 수 border-style, 등 ...

당신이 이들의 불만이 경우

, 나는 border gradients 같은 더 복잡한 솔루션을 찾고 제안 .

Answer 2

나는이 질문을 아주 재미있어하므로 약간의 수정을 시도했다.

나는 아직 찾고있는 해결책을 찾을 수 없습니다

,하지만 난 나를 위해 뭔가 흥미로운 것을 발견 적어도 :

• 시작 및 호버에서 다양한 1px로 td의 경계를 설정하는 경우 http://jsfiddle.net/Ax9eL/6/

을하지만 그래,이 솔루션이 좋은/좋지 않다 테이블 이동한다 : 사람은 2px 넓은 그것이 내가 말을 아주 잘 작동합니다.

• 중 아주 좋은 보이지 않는 내가 대신 border-collapse: collapse;의 border-collapse: separate; border-spacing:0px;을 시도 한가지 더 : http://jsfiddle.net/Ax9eL/15/ 사람이 더 나은 솔루션을 가지고 올 수 있다는

희망,이 수 있다면)

Answer 3

확인 도와주세요.

DEMO

HTML

<div class="advertisements"> 
    <table cellspacing="0" cellpadding="0" > 
    <tr> 
    <td><div>1</div></td> 
    <td><div>2</div></td> 
    <td><div>3</div></td> 
    <td><div>4</div></td> 
    </tr> 
    <tr> 
    <td><div>1</div></td> 
    <td><div>2</div></td> 
    <td><div>3</div></td> 
    <td><div>4</div></td> 
    </tr> 
    <tr> 
    <td><div>1</div></td> 
    <td><div>2</div></td> 
    <td><div>3</div></td> 
    <td><div>4</div></td> 
    </tr> 
    </table> 
</div> 

.advertisements table { 
    text-align: center; 
    font-size: 16px; 
    /* border-collapse: collapse; */ 
    width: 100%; 
    margin-top: 10px; 
} 
.advertisements div { 
    background-color: #9EC630; 

    background: -moz-linear-gradient(#9EC630, #87AB29); 
    background: -o-linear-gradient(#9EC630, #87AB29); 
    background: -webkit-linear-gradient(#9EC630, #87AB29); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9EC630), color-stop(1, #87AB29)); 
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#9EC630, EndColorStr=#87AB29)"; 
    background: linear-gradient(#9EC630, #87AB29); 
    border-bottom: 2px solid #fff; 
    border-top: 2px solid #fff; 
    padding: 10px; 
    position: relative; 
} 
.advertisements div:after { 
    width: 4px; 
    background: #fff; 
    content: " "; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.advertisements tr:hover div { 
    border-color: #1A446C 
} 
.advertisements tr:hover td:first-child div:before { 
    width: 2px; 
    background: #1A446C; 
    content: " "; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.advertisements td:last-child div:after { 
    display: none 
} 
.advertisements tr:hover td:last-child div:after { 
    width: 2px; 
    background: #1A446C; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    display: block; 
}