在CSS中设置单元格填充和单元格间距?

基础

要控制CSS中的“cellpadding”,只需使用 padding

td { 
    padding: 10px;
}

对于“单元间距”,可以应用 border-spacing 将CSS属性添加到表中。例如,对于10px的“单元间距”:

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

该属性甚至允许单独的水平和垂直间距,这是老式“cellspacing”无法做到的。

IE 7中的问题

除了InternetExplorer到InternetExplorer7之外,几乎所有流行的浏览器都可以使用它,在那里你几乎没有运气。我之所以说“几乎”,是因为这些浏览器仍然支持 border-collapse 属性,该属性合并相邻表单元格的边框。如果您试图消除单元间距(即, cellspacing="0" border-collapse:collapse 应该具有相同的效果:表单元格之间没有空格。不过,这种支持存在缺陷,因为它不会覆盖现有的 cellspacing table元素上的HTML属性。

简而言之:对于非InternetExplorer 5-7浏览器, 边界间距 处理你。对于InternetExplorer,如果您的情况正好(您想要0个cellspacing,而您的表还没有定义它),您可以使用 .

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

注意:有关可以应用于表和哪些浏览器的CSS属性的详细概述,请参见 fantastic Quirksmode page .

浏览器的默认行为相当于:

table {border-collapse: collapse;}
td    {padding: 0px;}

table {border-collapse: collapse;}
td    {padding: 6px;}

细胞间距

控制表格单元格之间的间距

table {border-spacing: 2px;}
td    {padding: 0px;}

二者都

table {border-spacing: 2px;}
td    {padding: 6px;}

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

注: 如果有 border-spacing 设置,它表明 border-collapse 表的属性为 separate .

Try it yourself!

Here

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

据我所知,在表格单元格上设置边距实际上没有任何效果。真正的CSS等价于 cellspacing 是 border-spacing

你可以用 border-collapse: collapse 如前所述,要可靠地将单元格间距设置为0,但对于任何其他值,我认为唯一的跨浏览器方法是继续使用 细胞间距 属性

此黑客适用于InternetExplorer6及更高版本, Google Chrome 、Firefox和 Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

* 声明适用于InternetExplorer6和7,其他浏览器将正确地忽略它。

expression('separate', cellSpacing = '10px') 'separate' ,但这两条语句都是运行的,因为在JavaScript中,您可以传递比预期更多的参数,并且所有参数都将被计算。

对于那些想要非零cellspacing值的人,下面的CSS对我很有用,但我只能在Firefox中测试它。

Quirksmode posted elsewhere 有关兼容性的详细信息。它似乎不适用于较旧的InternetExplorer版本。

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

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

cellspacing="0" border-collapse: collapse 在你的 table 的样式表。

所以CSS将会是,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

是的,很麻烦。是的,它与Internet Explorer配合使用。事实上,我只是用InternetExplorer测试过这个,因为这是我们在工作中可以使用的所有东西。

border-collapse: collapse 给你的桌子,还有 padding 对于 th 或 td .

表的完全重置 - , 细胞间距 边界 .

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH。对于所有与CSS的扇形排列,您最好只使用 cellpadding="0" cellspacing="0"

还有其他人建议增加利润吗 <td>

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

只需对表数据使用CSS填充规则:

td { 
    padding: 20px;
}

至于边界间距:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

但是,由于box模型的不同实现,它可能会在旧版本的浏览器(如InternetExplorer)中产生问题。

从W3C分类中我了解到 <table> “仅”用于显示数据。

基于此,我发现创建一个 <div> 有背景和所有这些,并且有一个数据浮动在上面的表,使用 position: absolute; background: transparent; ...

它适用于Chrome、InternetExplorer(6及更高版本)和Mozilla Firefox(2及更高版本)。

边距用于(或无论如何)在容器元素之间创建分隔符,如 <表> , <部门> <form> 不 <tr> <td> , <span> <input>

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

试试这个:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

我曾经 !important 在边界崩溃之后

border-collapse: collapse !important;

在IE7中它对我有效。它似乎覆盖了cellspacing属性。

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding padding 在CSS中 cell-spacing 可以通过设置来设置 border-spacing 为了桌子。

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

margin 不起作用,尝试设置 display 属于 tr block 然后保证金就会起作用。

对于表格,单元格间距和单元格填充在HTML5中已经过时。

现在,对于单元格间距,必须使用边框间距。对于单元格填充,必须使用边框折叠。

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

cellpadding 和 cellspacing

对于 细胞填充

就这么简单吧 td/th 单间牢房 padding .

例子:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

就这么简单吧 table border-spacing

例子:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

here you get more table style by CSS .

您只需在CSS中使用 border-spacing padding :

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

假设我们希望以符合HTML5的方式为表分配10px的“cellpadding”和15px的“cellspacing”。我将在这里展示两种输出非常相似的方法。

两组不同的CSS属性应用于表的相同HTML标记,但概念相反:

• 第一个使用的是默认值 border-collapse separate )和使用 border-spacing 要提供单元间距,

• 到 collapse 并使用 border 属性作为单元格间距。

在这两种情况下,单元格填充都是通过分配 padding:10px td 在这两种情况下 background-color

第一种方法:

table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}

<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

第二种方法:

table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}

<<tr>
</tr>
<tr>
</tr>
<td>3</td>&书信电报;td>4</td>
</tr>

index.html 然后运行它。

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-spacing: 10px;
    }
    
    td {
      padding: 10px;
    }
  </style>
</head>

<body>
  <table cellspacing="0" cellpadding="0">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</body>

</html>

输出:

直接将样式添加到表本身如何?这不是使用 table 在CSS中,哪一个是 如果页面上有多个表,则采用以下方法:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

这对我很有用:

table {border-collapse: collapse}
table th, table td {padding: 0}

我建议这一点以及特定表格的所有单元格都会受到影响。

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px;
 }