CSS水平表单元格间距:怎么样?

希望这是一个容易的,但我还没有find一个解决scheme。 我想在桌子上的列之间放置空间。

| Cell |<- space ->| Cell |<- space ->| Cell | 

重要的一点是,我不想在边缘空间。 有一个border-spacing属性,但在IE(6或7)中不支持,所以不好。 它也把空间放在边缘。

我提出的最好的方法是在我的表格单元格上加上padded-right:10px,然后向最后一个单元格添加一个类以删除填充。 这是不太理想的,因为额外的空间是不在其外的单元的一部分。 我想你可以用透明的边框做同样的事情?

我也尝试使用jQuery:

 $(function() { $("table > tbody > tr:not(:last-child").addClass("right-padding"); }); 

但是即使在只有〜100行的桌子上,在某些情况下也需要200-400毫秒,这太慢了。

任何帮助赞赏。

谢谢

对于那些build议列他们不工作。 尝试这个:

 <html> <head> <title>Layout</title> <style type="text/css"> table { border: 1px solid black; } td { background: yellow; } </style> </head> <body> <table> <col style="padding-right: 30px;"> <col style="padding-right: 30px;"> <col> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> 

如何给每个表格单元一个透明的边框? 我很确定这会为你做…

 table td { border:solid 5x transparent; } 

而你只能像这样水平应用它…

 table td { border-left:solid 10px transparent; } table td:first-child { border-left:0; } 

这里是我相信你正在努力完成的一个完整的工作演示…

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Layout</title> <style type="text/css"> table { border: 1px solid black; } table td { background: yellow; border-left:solid 10px transparent; } table td:first-child { border-left:0; } </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> 

我不相信IE6支持CSS:第一个孩子,所以这是一个解决方法…

 <!–-[if IE 6]> <style type="text/css"> table td { border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent'); } </style> <![endif]--> 

这可能是你在做什么:

您可以使用两个值:第一个是水平细胞间距,第二个是垂直细胞间距。

 <table style="border-spacing: 40px 10px;"> 

尝试使用col

 <table> <col style="padding-right:20px;" /> <col style="padding-right:30px;" /> <col /> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> 

cols也支持类:)

希望这可以帮助

达科

编辑:澄清一个col是一个元素声明在表顶部影响整个列。 第一个col元素将影响第一列,第二列col =第二列等等。 如果您希望将相同的样式分配给多个列,则可以将它们分组到colgroup中。

编辑2:经过一些更多的研究后发现,您可以在col元素上设置的唯一可靠样式是:

  • 边境
  • 背景
  • 宽度
  • 能见度

没有保证金或填充。 开溜! 会设置列的宽度明确解决您的问题?

你也可以考虑使用一系列固定的宽度divs左边浮动。 这可能会让你对元素样式有更多的控制。

 .row div { margin-right: 10px; float: left; width: 50px; } <div class="row"> <div>Cell One</div> <div>Cell Two</div> <div>Cell Three</div> </div> 

如果你已经在你的细胞周围有了像我一样的边框,乔希的回答就行不通了。

我通过将整个表格稍微向左移动来解决问题,使用“position:relative; left:-10px”。 我把这个与cellpacing在桌子上。

 <div id='sandbox'> <table cellspacing='10'> <tr> <td class='smoothBox'> ... </td> <td class='smoothBox'> ... </td> </tr> </table> </div> 

和CSS:

 #sandbox { float: left; position: relative; /* move the whole sandbox */ left: -11px; /* slightly to the left */ width: 950px; margin-top: 0px; padding: 1px; text-align: left; } #sandbox table { float: left; width: 100%; } #sandbox td { width: 300px; vertical-align: top; } 

这是对我有用的,我希望它也可以帮助你。

你尝试使用col分组吗?

 <table> <colgroup> <col class="right-padding" /> <col class="right-padding" /> <col /> </colgroup> <tbody> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> 

这是我的工作

border-collapse: separate; border-spacing: 0px 3px;

如果只是添加一个空的细胞,作为一个间隔? 你可以使用上述col-tag给空单元格一定的宽度

 <col/> <col style="width:20px"/> <col/> <col style="width:20px"/> <col/> <tr> <td>Data</td> <td>& nbsp;</td> <td>Data</td> <td>& nbsp;</td> <td>Data</td> </tr> 

或者如果你想要做更多的事情,只需添加类,而不是使用内联样式…

乔希的答案相当好,但在我看来是不必要的复杂。 如果将表格边框设置为“隐藏”并将折叠模式设置为“折叠”,则会根据需要删除列外边框上的边框。

工作示例:

样式表:

 table#my_table { border-collapse: collapse; border-style: hidden; } table#my_table td { border-left: 15px solid transparent; border-right: 15px solid transparent; } 

HTML:

 <table id="my_table"> <tr> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> </tr> </table>