在CSS中设置cellpadding和cellspacing？

问题描述

在HTML表格中， cellpadding 和 cellspacing 可设置为：

 < table cellspacing =1cellpadding =1> 
  

如何使用CSS实现同样的功能？

解决方案

基础

为了控制CSS中的cellpadding，您只需使用 padding 。例如。对于10px的cellpadding：

  td {
 padding：10px; 
} 
  

对于cellspacing，您可以应用 -spacing CSS属性到您的表。例如。对于10px的cellspacing：

  table {
 border-spacing：10px; 
 border-collapse：separate; 
} 
  

此属性甚至允许单独的水平和垂直间距，

除了互联网资源管理器，通过互联网资源管理器7，几乎所有流行的浏览器都可以使用，这里几乎没有运气。我说几乎，因为这些浏览器仍然支持 border-collapse 属性，它合并邻接表单元格的边框。如果你想消除单元格空间（即 cellspacing =0），然后 border-collapse：collapse 应该有相同的效果：表格单元格之间没有空格。但是，这种支持是错误的，因为它不覆盖表元素上现有的 cellpacing HTML属性。

简而言之：对于非互联网资源管理器5-7浏览器， border-spacing 处理您。对于Internet Explorer，如果您的情况正好（您想要0个单元格间距，并且您的表格没有已经定义），您可以使用 border-collapse：collapse 。

  table {
 border-spacing：0; 
 border-collapse：collapse; 
} 
  

注意：有关可以应用于表的CSS属性的完整概述，对于哪些浏览器，请参阅此。

In an HTML table, the cellpadding and cellspacing can be set like this:

<table cellspacing="1" cellpadding="1">

How can the same be accomplished using CSS?

解决方案

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td {
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table {
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE <= 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table {
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

这篇关于在CSS中设置cellpadding和cellspacing？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！