如何删除html表中单元格之间的空格

我尝试删除Table1Header和Table2Header之间的空白。我尝试了border：0px，padding：0px和border-spacing：0px;样式。 Firefox和Opera告诉我，我的边界间距样式被用户代理样式（这是2px）所覆盖。我如何强制浏览器使用我的styleshits？如何删除html表中单元格之间的空格

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; 
}

来源

2014-01-14 user3193136

'table {border-collapse：collapse; }'可能是你需要的。但是，尽管如此-1这个混乱（即使它只是一个样本）！ – Abhitalks

的浏览器不告诉你，你的border-spacing样式由用户代理样式覆盖片。相反，他们可能会指出继承不会发生在。这是由某些样式表设置元素上的属性造成的。

您的规则不适用于内部table元素的原因是它不匹配任何选择器。选择

table.tableGroup > tr > td > table

不匹配，因为一个tr元素是永远即使看起来似乎是table一个孩子。通过HTML语法，即使缺少开始和结束标记，也会有一个中间元素tbody。以下选择将匹配：

table.tableGroup > tbody > tr > td > table

当然，区区table选择会做这项工作为好，只要你希望所有table元素由规则的样式。

来源

2014-01-14 08:27:57

如果他使用table.tableGroup表，如果他试图折叠所有的边界嵌套表...甚至更好只是'table {}'但反正+1，我没有告诉他'tbody'错过了 –

您可以简单地使用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; 
}

来源

2014-01-14 08:20:03

我的CSS错了，错过了tbody标记。 – user3193136

@ user3193136是的，但如果你的目标是所有的表格比不使用那个选择器 –

试试这个

table { 
    border-spacing:0px; 
}

works by using css

来源

2014-01-14 08:25:06

你让我想起了90年代:) –

tnx的人..没有经历为你..尝试从尽可能多的学习Stackoverflow ..你的答案比我的好得多..我也知道我也可以那样做。谢谢.. –

没有难的感觉:)我们回答错了，我们学习，只需用CSS做这个，我会upvote你的答案:) –

你需要在每个表标签与

例如

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

* 例如添加（BORDER = “0” 的cellpadding = “0” CELLSPACING = “0”）表悼念你类*

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

来源

2014-01-14 09:21:29 fahd4007

这在Chrome – Tyguy7

如何删除html表中单元格之间的空格

回答

相关问题