在CSS中设置cellpadding和cellspacing？-Java 学习之路

3009

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

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

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

26 回答

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

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

回复于 2024-05-03T00:35:57+08:00

2
在边界崩溃之后我使用了 !important
```
border-collapse: collapse !important;
```
它在IE7中适用于我 . 它似乎覆盖了cellspacing属性 .
回复于 2024-05-03T00:35:57+08:00
64
对于那些想要非零单元间距值的人来说，下面的CSS对我有用，但我只能在Firefox中测试它 . 有关兼容性的详细信息，请参阅Quirksmode link posted elsewhere . 似乎它可能不适用于较旧的Internet Explorer版本 .
```
table {
    border-collapse: separate;
    border-spacing: 2px;
}
```
回复于 2024-05-03T00:35:57+08:00

317

<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 可以在CSS中由 padding 给出，而 cell-spacing 可以通过为表设置 border-spacing 来设置 .

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

Fiddle .

回复于 2024-05-03T00:35:57+08:00

47

根据我对W3C分类的理解， <table> s用于显示数据'only' .

基于此，我发现使用背景和所有这些创建 <div> 要容易得多，并且使用 position: absolute; 和 background: transparent; 有一个数据浮动的表格...

它适用于Chrome，IE（6及更高版本）和Mozilla（2及更高版本） .

使用边距（或者无论如何）来在容器元素之间创建间隔，例如 <table> ， <div> 和 <form> ，而不是 <tr> ， <td> ， <span> 或 <input> . 将其用于容器元素以外的任何其他内容将使您忙于调整您的网站以便将来的浏览器更新 .

回复于 2024-05-03T00:35:57+08:00

-1

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

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

回复于 2024-05-03T00:35:57+08:00

88

另外，如果你想要 cellspacing="0" ，不要忘记在 table 的样式表中添加 border-collapse: collapse .

回复于 2024-05-03T00:35:57+08:00

试试这个：

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

或试试这个：

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

回复于 2024-05-03T00:35:57+08:00

8

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

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

回复于 2024-05-03T00:35:57+08:00
4
Simply use CSS padding rules with table data:
```
td { 
    padding: 20px;
}
```
对于边界间距：
```
table { 
    border-spacing: 1px;
    border-collapse: collapse;
}
```
However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.
回复于 2024-05-03T00:35:57+08:00
868
Basics

要在CSS中控制"cellpadding"，您可以在表格单元格上使用 padding . 例如 . 10px的"cellpadding"：
```
td { 
    padding: 10px;
}
```
对于"cellspacing"，您可以将 border-spacing CSS属性应用于表 . 例如 . 为10px的"cellspacing"：
```
table { 
    border-spacing: 10px;
    border-collapse: separate;
}
```
这个属性甚至可以允许单独的水平和垂直间距，这是旧学校“cellspacing”无法做到的 .

Issues in IE <= 7

这将适用于几乎所有流行的浏览器，除了Internet Explorer通过Internet Explorer 7，你几乎没有运气 . 我说"almost"因为这些浏览器仍然支持 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属性的概述，请参阅fantastic Quirksmode page .
回复于 2024-05-03T00:35:57+08:00
16
用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测试过这个，因为这是我们允许在工作中使用的全部内容 .
回复于 2024-05-03T00:35:57+08:00

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

回复于 2024-05-03T00:35:57+08:00

您可以使用CSS填充属性轻松地在表格单元格内设置填充，这是产生与表格的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>

回复于 2024-05-03T00:35:57+08:00

您可以使用 border-spacing 和 padding 在CSS中执行类似的操作：

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>

回复于 2024-05-03T00:35:57+08:00

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

如果 margin 不起作用，请尝试将 tr 的 tr 设置为 block 然后保证金将起作用 .

回复于 2024-05-03T00:35:57+08:00

CSS：

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

回复于 2024-05-03T00:35:57+08:00

1
默认

浏览器的默认行为等效于：
```
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-spacing，则表示表的border-collapse属性是分开的 .

Try it yourself!

Here你可以找到旧的html方式实现这一点 .
回复于 2024-05-03T00:35:57+08:00
0

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

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

回复于 2024-05-03T00:35:57+08:00
3

TBH . 对于所有使用CSS的人来说，你也可以使用 cellpadding="0" cellspacing="0" 因为它们不被弃用...

其他任何人建议 <td> 的利润率显然没有尝试过 .

回复于 2024-05-03T00:35:57+08:00

106

此样式适用于 Full Reset for tables - cellpadding ， cellspacing 和 borders .

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

回复于 2024-05-03T00:35:57+08:00

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

对于 Cell-Padding ：只需调用简单的 td/th cell padding

EX:

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

对于 Cell-Spacing

只需简单地调用 table border-spacing

EX:

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

CSS源链接here you get more table style by css更多表格样式

回复于 2024-05-03T00:35:57+08:00

12
将样式直接添加到表本身怎么样？这不是在你的CSS中使用 table ，如果你的页面上有多个表，这是一个 BAD 方法：
```
<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
```
回复于 2024-05-03T00:35:57+08:00
10

只需将 border-collapse: collapse 用于表格，将 padding 用于 th 或 td

回复于 2024-05-03T00:35:57+08:00

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

回复于 2024-05-03T00:35:57+08:00

3304
此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中您可以传递比预期更多的参数，并且将对它们进行全部评估 .
回复于 2024-05-03T00:35:57+08:00

在CSS中设置cellpadding和cellspacing？

26 回答

默认

Cellpadding

Cellspacing

两者

两者（特别）

相关问题