如何刪除html表中單元格之間的空格

Question

我嘗試刪除Table1Header和Table2Header之間的空白。我嘗試了border：0px，padding：0px和border-spacing：0px;樣式。 Firefox和Opera告訴我，我的邊界間距樣式被用戶代理樣式（這是2px）所覆蓋。我如何強制瀏覽器使用我的styleshits？

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

的瀏覽器不告訴你，你的border-spacing樣式由用戶代理樣式覆蓋片。相反，他們可能會指出繼承不會發生在。這是由某些樣式表設置元素上的屬性造成的。

您的規則不適用於內部table元素的原因是它不匹配任何選擇器。選擇

table.tableGroup > tr > td > table 

不匹配，因爲一個tr元素是永遠即使看起來似乎是table一個孩子。通過HTML語法，即使缺少開始和結束標記，也會有一箇中間元素tbody。以下選擇將匹配：

table.tableGroup > tbody > tr > td > table 

當然，區區table選擇會做這項工作爲好，只要你希望所有table元素由規則的樣式。

Answer 2

您可以簡單地使用border-collapse: collapse;甚至border-spacing: 0;是好的

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

Demo

您可以輕鬆地用一個簡單的元素選擇覆蓋用戶代理樣式表。

---

如果你想正常化的樣式，你應該使用CSS Reset

---

來到你的選擇是看起來髒我，喲與class.tableGroup和table嵌套目標表根據該

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

所以你最好使用

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

Answer 3

試試這個

table { 
    border-spacing:0px; 
} 

works by using css

Answer 4

你需要在每個表標籤與

例如

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

* 例如添加（BORDER = 「0」 的cellpadding = 「0」 CELLSPACING = 「0」）表悼念你類*

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