CSS单元边距


Answers:


91

将此应用到您的第一个<td>

padding-right:10px;

HTML示例:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

12
更好的方法是使用边界折叠:单独
Gaurav Ramanan 2013年

21
万一有人在复制/粘贴边框折叠技术(上面的注释中border-collapse: separate有错字),应该是(separate上面的拼写有错字)
Tony DiNitto

1
另外,如果你想定义的边界之间的空间量,你将不得不使用border-spacing: 5px;
解决Tornøe

border-spacing还增加了行之间的空间。不幸的是,垂直和水平间距没有单独的属性。
Lee Blake

border-spacing需要两个参数-一个用于水平,一个用于垂直。
OldTinfoil

152

一个警告:虽然padding-right可以解决您特定的(视觉)问题,但这不是表格单元格之间增加间距的正确方法。什么padding-right确实的细胞类似于它做什么其他大多数元素:它增加了空间的单元格。如果单元格没有边框或背景色或其他可以使游戏消失的颜色,则可以模拟设置单元格之间的空间的效果,但不能模仿。

有人指出,表单元格的边距规范被忽略:

CSS 2.1规范–表格–表格内容的可视化布局

内部表格元素会生成带有内容和边框的矩形框。单元格也有填充。内部表元素没有空白。

那么“正确”的方式是什么?如果要替换cellspacing表的属性,则border-spacingborder-collapse禁用)为替换。但是,如果需要每个单元的“边距”,我不确定如何使用CSS来正确实现。我唯一想到的技巧是使用padding上述方法,避免对单元格进行任何样式设置(背景颜色,边框等),而是使用单元格内部的容器DIV来实现这种样式。

我不是CSS专家,因此在上面我可能是错的(很高兴知道!我也希望使用表格单元格边距CSS解决方案)。

干杯!


这很好,全部用于填充,但是保证金呢?我想在包含边框的单元格外部添加空间。边距CSS似乎对单元格没有影响。
Levitikon 2011年

1
Levitikon,没错-出于上述原因,边距无效。获得所需内容的唯一方法是AFAIK,是将单元格的内容包装在DIV中,然后在该DIV中而不是单元格中添加边距边框。
拉维

我很久以前发布了CSS解决方案(今天已更新):stackoverflow.com/a/21551008/2827823
Ason,2016年


14

我意识到这是迟来的,但是为了记录起见,您还可以使用CSS选择器来做到这一点(消除了对内联样式的需求。)此CSS将填充应用于每行的第一列:

table > tr > td:first-child { padding-right:10px }

这就是您的HTML,没有CSS !:

<table><tr><td>data</td><td>more data</td></tr></table>

这样可以提供更优雅的标记,尤其是在需要使用CSS进行许多特定格式设置的情况下。


14

不幸的是,margin不能在单个单元格上工作,但是您可以在两个单元格之间添加额外的列,并在它们之间放置一个空格...另一种选择是使用与背景颜色相同的边框...


似乎border与padding有相同的问题-它在单元格内容和边界之间而不是边界之外增加了空间。
stewbasic

11

您可以简单地做到这一点:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

不需要CSS :)这10px是您的空间。


这很好,简单且有效,感谢您提醒我+1
Hayden Thring 2013年

8
这不是分离结构和样式的好方法。这不是是否需要CSS的情况-CSS应该用于这样的事情。
西蒙·罗伯

不应为<td style =“ width:10px;”> </ td>
符文·耶普森

1
请记住,最简单的解决方案是最好的。内联样式的方法也不错:)
MrTrebor

它适用于我的特定情况。很有创意。谢谢
Phan Van Linh

7

尝试padding-right。您不允许margin在单元格之间放置。

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

4

使用border-collapse:不适用于我,因为我只需要在表格单元格之间留一个边距,而不是在桌子的两边。

我想出了下一个解决方案:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

4

这对于解决工作td的同时需要borderpadding对造型。
(已在Chrome 32,IE 11,Firefox 25上测试)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

2016年更新

Firefox现在支持它,没有inline-block和一组width

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>


这也适用于由div制成的CSS表(display:table *)。
Necreaux 2015年

2

您不能以这种方式选出单元格中的各个列。我认为,最好的选择是style='padding-left:10px'在第二列上添加一个并将样式应用于内部div或元素。这样,您可以实现更大空间的错觉。


2

如果您可以控制表格的宽度,请在所有表格单元格上向左插入空白,在整个表格上向左插入负空白。

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

注意,表格的宽度需要包括填充/边距宽度。以上面的示例为例,表格的可视宽度将为700px。

如果您在表格单元格上使用边框,这不是最佳解决方案。


2

我发现解决此问题的最佳方法是反复试验和阅读我之前写的东西:

http://jsfiddle.net/MG4hD/


如您所见,我正在进行一些非常棘手的事情……但是使它变得更好的主要推动力是:

父元素(UL):边界折叠:单独;边框间距:.25em;左边距:-.25em;
儿童元素(LI):显示:表格单元格;垂直对齐:中间;

的HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

的CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

1

在Cian解决将边框设置为边距的解决方案之后,我发现可以将边框颜色设置为透明,以避免必须与背景颜色匹配。适用于FF17,IE9,Chrome v23。如果您不需要实际的边框,似乎是一个不错的解决方案。


1

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

使用填充不是正确的方法,它可能会改变外观,但这不是您想要的。这样可以解决您的问题。


该解决方案已经发布,无需两个答案就可以说出同样的话。
阿森


1

如果无法使用填充,则另一种解决方法是添加额外的列并使用设置宽度<colgroup>。当我试图给单元格边框本身留出一定的余量时,以上的填充解决方案都对我不起作用,这最终解决了问题:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

使用:nth-​​child设置表格单元格的边框样式,使第二列和第三列看起来像是一列。

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

那掩盖了问题,没有回答。没人会学会这样做的正确方法
Mawg说,请恢复莫妮卡(Monica)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.