제거 TD의 외부 테두리

Question

나는 현재이 테이블을 가지고있다. 빨간 선을 긋는 곳에는 경계선이 있지만 나는 그곳에 그 경계선을 원하지 않습니다.

쉽게 제거 할 수 있습니까?

편집 :

예상 결과 :

Answer 1

당신은 태그에 특정 td ID를 부여하고 국경을 제거하기 위해 CSS를 사용할 수 있습니다

border-left: none; 
border-bottom: none; 

Answer 2

당신의 요구 사항은 거의 까다 롭습니다. 이 곧바로 성취 할 수는 없습니다. 그러나 몇 가지 추가 코드를 사용하여이 작업을 수행 할 수 있습니다. 아이디어는 왼쪽 및 오른쪽 테두리를 흰색 텍스트로 할당하는 특정 테이블 열에 하나의 div를 만드는 것입니다. 마이너스 값에 여백을 할당하면 원래 테이블 경계를 숨길 수 있습니다.

HTML :

<table cellpadding="3" border="1"> 
<thead> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
</thead> 
<tbody> 
    <tr> 
     <td>11</td> 
     <td>22</td> 
     <td>33</td> 
     <td>44</td> 
     <td>55</td> 
     <td>66</td> 
    </tr> 
    <tr> 
     <td colspan="3" style="border:0px; border-top:1px solid #000; border-right:1px solid #000;"><div style="margin-left:-6px; border:1px solid #fff; margin-bottom:-6px; height:100%;"> 
      <div style="padding:5px">te</div> 

     </div></td> 
     <td colspan="2">as</td> 
     <td>bs</td> 
    </tr> 
</tbody> 
</table> 

JSFIDDLE DEMO

Answer 3

까다로운 약간 당신이 기대하는 것을 달성하기 위해, 나는

주위 작업의 종류가하지만 정확한 출력을 원하는 경우 수도 테이블을 없애고 div, span 등을 일부 CSS와 함께 사용해야합니다.

이 피들을 확인하려면 확인하십시오. 당신은 여전히 ​​관심이 있다면 그것은, 그래서

td { 
    padding: 10px 20px; 
    border: 2px solid gray; 
} 

Answer 4

<table> 
<thead> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
</thead> 
<tbody> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="3" style="border: 0;"></td> 
     <td colspan="2"></td> 
     <td></td> 
    </tr> 
</tbody> 

fiddle demo

을 도움이된다면. :after을 사용하는 아이디어입니다.

Have a fiddle!

CSS

table { 
    border: solid 1px #000; 
} 
td { 
    border: solid 1px #000; 
    padding: 20px; 
    width: 100px; 
} 
.borderless { 
    border: none; 
    position: relative; 
} 
.borderless:after { 
    content:""; 
    border-top: solid 1px #000; 
    border-right: solid 1px #000; 
    display: block; 
    height: 62px; 
    width: 287px; 
    position: absolute; 
    top: 0; 
    left: -3px; 
    background: #FFF; 
} 

HTML

<table> 
    <thead> 
     <td>Content</td> 
     <td>Content</td> 
     <td>Content</td> 
     <td>Content</td> 
     <td>Content</td> 
     <td>Content</td> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="3" class="borderless">Content</td> 
      <td colspan="2">Content</td> 
      <td>Content</td> 
     </tr> 
    </tfoot> 
</table> 

Answer 5

<table border="1" cellpadding="3"> 
    <thead> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td colspan="3"></td> 
      <td colspan="2"></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 




td { 
    padding: 10px 20px; 
    border: 1px solid #000; 
} 
td[colspan="3"] { 
    border:none; 
    position:relative; 
} 
td[colspan="3"]:after { 
    content:""; 
    border-top: solid 1px #000; 
    border-right: solid 1px #000; 
    display: block; 
    height: 24px; 
    width: 132px; 
    position: absolute; 
    top: 0; 
    left: -3px; 
    background: #FFF; 
} 

Demo success