在HTML表中，cellpadding和cellspacing可以这样设置：
<table cellspacing="1" cellpadding="1">
使用CSS如何完成相同的工作？
在CSS中设置cellpadding和cellspacing吗？
You can check the below code just create a index.html and run it.
<!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>
OUTPUT :
In an HTML table, the cellpadding and cellspacing can be set like this:
For cell-padding:
Just call simple td/th cell padding.
Example:
/******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;
}
For cell-spacing
Just call simple table border-spacing
Example:
/********* 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;
}
More table style by CSS source link here you get more table style by CSS.
How about adding the style directly to the table itself? This is instead of using table in your CSS, which is a BAD approach if you have multiple tables on your page:
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>
You can simply do something like this in your CSS, using border-spacing and 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>I used !important after the border-collapse like
border-collapse: collapse !important;
and it works for me in IE7. It seems to override the cellspacing attribute.
table {
border-spacing: 4px;
color: #000;
background: #ccc;
}
td {
padding-left: 4px;
}
Try this:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Or try this:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
<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 can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table.
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
Simply use CSS padding rules with table data:
td {
padding: 20px;
}
And for border spacing:
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.
Just use border-collapse: collapse for your table, and padding for th or td.
This style is for full reset for tables - cellpadding, cellspacing and borders.
I had this style in my reset.css file:
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 */
}
据我所知，在表格单元格上设置边距实际上并没有任何效果。真正的CSS等效项cellspacing是border-spacing-但在Internet Explorer中不起作用。
border-collapse: collapse如前所述，您可以用来将像元间隔可靠地设置为0，但是对于任何其他值，我认为唯一的跨浏览器方法是继续使用该cellspacing属性。
The simple solution to this problem is:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
默认
浏览器的默认行为等效于：
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。
在这里，您可以找到实现此目标的旧HTML方法。
I suggest this and all the cells for the particular table are effected.