在CSS中设置cellpadding和cellspacing？

Question

在一个HTML表中,cellpadding并cellspacing可以设置是这样的:

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

如何使用CSS完成同样的工作？

Answer 1

基本

为了控制CSS中的"cellpadding",您可以简单地使用padding表格单元格.例如10px的"cellpadding":

td { 
    padding: 10px;
}

对于"cellspacing",您可以将border-spacingCSS属性应用于表.例如10px的"cellspacing":

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

此属性甚至会允许独立的水平和垂直间距,有些东西你不能用老派"CELLSPACING"做.

IE中的问题<= 7

这将适用于几乎所有流行的浏览器,除了Internet Explorer通过Internet Explorer 7,你几乎没有运气.我说"差不多",因为这些浏览器仍然支持border-collapse属性,该属性合并相邻表格单元格的边框.如果你试图消除cellspacing(也就是说),cellspacing="0"那么border-collapse:collapse应该具有相同的效果:表格单元格之间没有空格.但是,这种支持是错误的,因为它不会覆盖cellspacing表元素上的现有HTML属性.

简而言之:对于非Internet Explorer 5-7浏览器,请border-spacing处理您.对于Internet Explorer,如果您的情况恰到好处(您希望0个cellspacing并且您的表尚未定义它),则可以使用border-collapse:collapse.

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

注意:有关可以应用于表和哪些浏览器的CSS属性的概述,请参阅这个梦幻般的Quirksmode页面.

Answer 2

默认

浏览器的默认行为等效于:

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

         

CELLPADDING

设置单元格内容与单元格墙之间的间距

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

        

CELLSPACING

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

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

        

都

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

        

两者(特别)

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

        

注意:如果有border-spacingset,则表示border-collapse表的属性为separate.

亲自尝试一下!

在这里你可以找到实现这一目标的旧html方式.

Answer 3

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

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

Answer 4

据我所知,设置表格单元格的边距并没有任何影响.真正的CSS等价物cellspacing是border-spacing- 但它在Internet Explorer中不起作用.

您可以使用border-collapse: collapse如上所述可靠地将单元格间距设置为0,但对于任何其他值,我认为唯一的跨浏览器方式是继续使用该cellspacing属性.

Answer 5

此hack适用于Internet Explorer 6及更高版本,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 */
}

该*声明适用于Internet Explorer 6和7,其他浏览器将正确忽略它.

expression('separate', cellSpacing = '10px')返回'separate',但是两个语句都在运行,因为在JavaScript中你可以传递比预期更多的参数,并且所有参数都将被评估.

Answer 6

对于那些想要非零单元间距值的人来说,下面的CSS对我有用,但我只能在Firefox中测试它.有关兼容性详细信息,请参阅其他位置发布的Quirksmode链接.似乎它可能不适用于较旧的Internet Explorer版本.

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

Answer 7

这个问题的简单解决方案是:

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

Answer 8

此外,如果您愿意cellspacing="0",请不要忘记添加border-collapse: collapse您table的样式表.

Answer 9

用div包装单元格的内容,你可以做任何你想做的事情,但你必须将每个单元格包装在一列中以获得统一的效果.例如,要获得更宽的左右边距:

所以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>

是的,这很麻烦.是的,它适用于IE.事实上,我只是用IE测试过这个,因为这是我们允许在工作中使用的全部内容.

Answer 10

只需border-collapse: collapse用于你的桌子,或padding用于th或td

Answer 11

此样式适用于表格的完全重置 - cellpadding,cellspacing和border.

我在reset.css文件中有这种风格:

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 */
}

Answer 12

TBH.对于所有使用CSS的人来说,您可能只是使用它,cellpadding="0" cellspacing="0"因为它们不被弃用...

其他人建议利润率<td>显然没有尝试过这个.

Answer 13

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

Answer 14

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

td { 
    padding: 20px;
}

对于边框间距:

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

但是,由于盒子模型的差异化实现,它可能会在Internet Explorer等旧版本的浏览器中产生问题.

Answer 15

根据我对W3C分类的理解,<table>s仅用于"仅显示数据".

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

它适用于Chrome,IE(6及更高版本)和Mozilla(2及更高版本).

页边距被使用(或反正意味着)来创建容器元素,例如之间的间隔件<table>,<div>并且<form>,不<tr>,<td>,<span>或<input>.将其用于容器元素以外的任何其他内容将使您忙于调整您的网站以供将来的浏览器更新.

Answer 16

CSS:

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

Answer 17

您可以使用CSS padding属性在表格单元格内轻松设置填充,这是产生与表格的cellpadding属性相同效果的有效方法.

table,
th,
td {
  border: 1px solid #666;
}

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

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

同样,您可以使用CSS border-spacing属性来应用相邻表格单元格边框之间的间距,例如cellspacing属性.但是,为了处理边界间距,border-collapse属性值的值是独立的,这是默认的.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Answer 18

试试这个:

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

或试试这个:

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

Answer 19

我!important在边界崩溃后使用过

border-collapse: collapse !important;

它在IE7中适用于我.它似乎覆盖了cellspacing属性.

Answer 20

假设我们想要以符合 HTML5 的方式为表格分配 10 像素的“cellpadding”和 15 像素的“cellspacing”。我将在这里展示两种提供非常相似输出的方法。

两组不同的 CSS 属性适用于表的相同 HTML 标记，但概念相反：

• 第一个使用border-collapse( separate) 的默认值并用于border-spacing提供单元格间距，

• 第二个切换border-collapse到collapse并使用该border属性作为单元格间距。

在这两种情况下，单元格填充都是通过分配padding:10px给tds 来实现的，并且在这两种情况下，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}

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

Answer 21

<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可以通过paddingCSS 给出,同时cell-spacing可以通过设置border-spacing表来设置.

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

小提琴.

Answer 22

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

如果margin没有工作,尝试设置display的tr到block,然后利润率将正常工作.

Answer 23

对于表格cellspacing和cellpadding在HTML 5中已经过时.现在对于cellspacing,你必须使用border-spacing.对于cellpadding,你必须使用border-collapse.

并确保您不在HTML5代码中使用它.始终尝试在CSS-3文件中使用这些值.

Answer 24

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

Answer 25

在 HTML 表格中，cellpadding和cellspacing可以这样设置：

对于单元格填充：

只需调用简单的td/thcell 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

例子：

table {
    border-collapse: collapse;
}

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

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

td {
  border: 1px solid red;
}

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

td {
  border: 1px solid red;
}

更多表格样式 CSS 源链接在这里您可以通过 CSS 获得更多表格样式。