html - table边框 - 漂亮table css




在CSS中设置cellpadding和cellspacing? (18)

默认

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

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属性是separate

亲自尝试一下!

Here你可以找到实现这一目标的旧html方式。

在HTML表格中, cellpaddingcellspacing可以设置如下:

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

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


CSS:

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

只需将CSS填充规则与表数据一起使用:

td { 
    padding: 20px;
}

对于边界间距:

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

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


基本

为了控制CSS中的“cellpadding”,您可以简单地在表格单元格上使用padding 。 例如10px的“cellpadding”:

td { 
    padding: 10px;
}

对于“cellspacing”,您可以将border-spacing CSS属性应用于表。 例如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页面


在HTML表格中, cellpaddingcellspacing可以设置如下:

对于Cell-Padding :只需调用简单的td/th单元格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;
}

对于细胞间距

只需调用简单的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源链接更多表格样式, 您可以通过css获得更多表格样式


在边界崩溃之后,我使用了!important

border-collapse: collapse !important;

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


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

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

将样式直接添加到表本身怎么样? 这不是在CSS中使用table ,如果您的页面上有多个表,这是一种不好的方法:

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

您可以使用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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


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

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


此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中你可以传递比预期更多的参数,并且所有参数都将被评估。


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


用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测试过这个,因为这是我们允许在工作中使用的全部内容。


试试这个:

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

或试试这个:

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

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

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

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

可以通过CSS中cell-padding来给出cell-spacing padding ,而可以通过设置表格的border-spacing来设置cell-spacing

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

Fiddle


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

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

如果margin不起作用,尝试将tr display设置为block ,然后保证金将起作用。





alignment