html 테이블에서 셀 사이의 공백을 제거하는 방법

Question

Table1Header와 Table2Header 사이의 공백을 제거하려고합니다. 나는 국경을 시도했다 : 0px, 패딩 : 0px 및 border-spacing : 0px; 스타일. 파이어 폭스와 오페라는 내 경계 - 간격 스타일이 사용자 에이전트 스타일 (2px)에 의해 무시된다는 것을 알려준다. 브라우저가 내 스타일을 사용하도록하려면 어떻게해야합니까?

http://jsfiddle.net/cdjDR/2/

<table class="tableGroup"> 
    <tbody> 
     <tr> 
      <td> 
       <table> 
        <tbody> 
         <tr class="tableHeader"> 
          <td><span class="tableHeader"><label>Table1Header</label></span> 

          </td> 
         </tr> 
         <tr class=" tableData"> 
          <td> 
           <div class="ui-datatable"> 
            <div> 
             <table> 
              <thead> 
               <tr> 
                <th> 
                 <div><span><span class="ui-header-text">Table1Col1</span></span> 
                 </div> 
                </th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td><span>2</span> 

                </td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <td> 
       <table> 
        <tbody> 
         <tr class="tableHeader"> 
          <td><span class="tableHeader"><label>Table2Header</label></span> 

          </td> 
         </tr> 
         <tr class="tableData"> 
          <td> 
           <div class="ui-datatable"> 
            <div> 
             <table> 
              <thead> 
               <tr> 
                <th> 
                 <div><span><span class="ui-header-text" >Table2Col1</span></span> 
                 </div> 
                </th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td><span>12345</span> 

                </td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 

span.tableHeader > label { 
    display: inline-block; 
    float:left; 
    line-height:30px; 
    padding-left:10px; 
    color: #202020; 
    font-size: 13px; 
} 
tr.tableHeader { 
    background-color: #EEEEEE; 
} 
table.tableGroup, table.tableGroup > tr > td > table { 
    border-spacing: 0px; 
} 
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text { 
    color: #808080; 
    font-size: 11px; 
} 
table.tableGroup td, table.tableGroup th { 
    padding: 0px; 
    border: 0px; 
} 

Answer 1

을 시도

table.tableGroup, 
table.tableGroup table { 
    border-spacing: 0; 
} 

Answer 2

쉽게 간단한 요소 선택기로 사용자 에이전트 스타일 시트를 덮어 쓸 수 있습니다 당신은 단순히 border-collapse: collapse; 사용할 수 있습니다 또는 border-spacing: 0;는

table { /* Will apply to all tables */ 
    border-spacing: 0; 
    /* OR border-collapse: collapse; */ 
} 

Demo

괜찮습니다. 요 class.tableGroup과 table 중첩와 테이블을 대상으로하는대로 스타일을 정상화하려는 경우, 당신은 당신의 선택에 오는 CSS Reset

---

사용해야

는

---

, 나에게 더러운 것 그

table.tableGroup, table.tableGroup > tr > td > table { 
    border-spacing: 0px; 
} 

에서

그래서 당신은 더 나은 브라우저가 border-spacing 스타일 사용자 에이전트 스타일에 의해 무시되는 것을 말하고 있지 않습니다이

table { 
    border-spacing:0px; 
} 

works by using css

Answer 3

사용 시트. 대신, 그들은 상속이 수행되지 않음을 나타낼 수 있습니다.. 이는 단순히 일부 스타일 시트가 요소의 속성을 설정한다는 사실 때문에 발생합니다.

규칙이 내부 table 요소에 적용되지 않는 이유는 선택자와 일치하지 않기 때문입니다. tr 요소로 나타날 수 있습니다 경우에도 table의 자식이 결코 없기 때문에 선택

table.tableGroup > tr > td > table 

, 그것과 일치하지 않습니다. HTML 구문을 사용하면 시작 및 종료 태그가없는 경우에도 중간에 tbody 요소가 있습니다. 다음 선택은 일치합니다 :

물론

table.tableGroup > tbody > tr > td > table 

뿐만 아니라 일을 할 것입니다 단순한 table 선택, 당신은 모든 table 요소가 규칙에 의해 스타일 싶은 것을 제공했다.

Answer 4

당신이 가진 모든 테이블 태그

예를

<table border="0" cellpadding="0" cellspacing="0"> 

* 예에서 (국경 = "0"의 cellpadding는 = "0"cellspacing는 = "0") 테이블 공물을 추가하셔야합니다 수업 *

<table border="0" cellpadding="0" cellspacing="0" class="tableGroup">