[예제첨부][css] table-collapse 적용시 border 한쪽이 안나와요.

[예제첨부][css] table-collapse 적용시 border 한쪽이 안나와요.

작성일 2018.10.27댓글 1건
    게시물 수정 , 삭제는 로그인 필요

http://jsfiddle.net/cdtbq7hn/

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
       <td>4</td>
    </tr>
</table>

<style>
table {border-collapse:collapse;width:100%;}
table td {border:1px solid #ccc; padding:10px; width:25%; box-sizing:border-box; }
table td:hover { border:1px solid #000; }
</style>

이경우.. 1위에 마우스 오버하면 border가 #000으로 제대로 나오는데요
2,3,4위에 마우스 오버하면 맨 왼쪽은 border가 적용되지 않아요

이럴때는 방법이 없는건가요?



profile_image 익명 작성일 -

border 대신에 outline 속성을 사용해 보시거나
ex: outline:1px solid #000;

css의 table td 에 display:inline-block를 추가한 뒤 동시에 html의 td부분을
<td>1</td><td>2</td><td>3</td><td>4</td>처럼 붙여서 해보시거나

table 대신에 div를 사용해 보세요.
[code]
<style>
#outer { width:100%; }
.inner { width:25%; padding:10px; border:1px solid #ccc; box-sizing:border-box; float:left; }
.inner:hover { border:1px solid #000; }
</style>

<div id="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>
[/code]

테두리 사이가 2줄 되는 부분에 대해서는 nth-child 이용하심 될 것 같습니다.

블로그 게시판

... 이렇게 나와요.. 페이지를 찾지... 파일첨부 사진 동영상 지도 absolute; HEIGHT... try { sel.getRange().collapse(false); } catch(err)...

컴퓨터 관련(IT) 용어 20개 알려주세요

저 중2입니다.. 학교 단기방학인데 숙제로 이런걸 내내요 ㅠ.ㅠ 간단한 컴퓨터 용어 20개 알려주세요 뜻도 간단하면 좋겠습니다..(한 2~3줄?) 내공은 30드림니다......

IPv6 헤더구조 관련하여 에러 문의...

... 이 글에 대한 모든 문의는 사절하며 저작권에 나와 있듯이 이 글을 인용하거나... 이것은 인터넷 통신을 할 때도 그대로 적용이 된다. 인터넷(Internet)이란 간단하게...