CSS Cell Margin

最后发布: 2009-04-04 03:28:09


问题

在我的HTML文档中,我有一个包含两列和多行的表。 如何用css增加第一列和第二列之间的空间? 我试过申请“保证金权利:10px;” 到左侧的每个单元格,但没有效果。

html css cell margin css-tables
回答

一句警告:尽管padding-right可能会解决您的特定(视觉)问题,但这不是表格单元格之间添加间距的正确方法。 padding-right对单元格的作用与对大多数其他元素的作用类似:它单元格增加了空间。 如果单元格没有边框或背景颜色或其他让游戏离开的东西,这可以模仿在单元格之间设置空间的效果,但不能。

正如有人指出的那样,表格单元格会忽略边距规范:

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

内部表元素生成带有内容和边框的矩形框。 细胞也有填充物。 内部表元素没有边距。

那么“正确”的方式是什么? 如果要替换表的cellspacing属性,则border-spacing (禁用border-collapse )是替换。 但是,如果需要每单元格“边距”,我不确定如何使用CSS正确实现。 我能想到的唯一的黑客就是如上所述使用padding ,避免细胞的任何样式(背景颜色,边框等),而是使用单元格内的容器DIV来实现这样的样式。

我不是CSS专家,所以我在上面可能是错的(这将是很好的知道!我也想要一个表格单元边缘CSS解决方案)。

干杯!


回答

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

padding-right:10px;

HTML示例:

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


回答

如果你不能使用填充(例如你在td中有边框)试试这个

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


回答

我意识到这是相当迟钝的,但是对于记录,你也可以使用CSS选择器来做到这一点(不需要内联样式。)这个CSS将填充应用于每一行的第一列:

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

这将是你的HTML,没有CSS!:

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

这样可以实现更优雅的标记,尤其是在需要使用CSS进行大量特定格式化的情况下。


回答

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


回答

你可以这样做:

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

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


回答

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

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


回答

这个解决方案适用于需要borderpadding样式的td
(在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> 


回答

使用边界崩溃:分开; 对我来说不起作用,因为我只需要在桌子两侧之间没有边缘。

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

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


回答

如果您可以控制表格的宽度,请在所有表格单元格上插入一个填充左侧,并在整个表格上插入一个负边距。

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

table td {
    padding-left: 20px;
}

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

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


回答

我发现解决这个问题的最好方法是尝试和错误的结合,并阅读我之前写的内容:

http://jsfiddle.net/MG4hD/


正如你所看到的,我有一些非常棘手的事情......但是让这看起来很好的主要原因是:

父母元素(UL):边界崩溃:分开; border-spacing:.25em; margin-left:-.25em;
儿童元素(LI):显示:table-cell; vertical-align:middle;

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


回答

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


回答

按照Cian设置边框代替边距的解决方案,我发现您可以将边框颜色设置为透明,以避免与背景颜色匹配。 适用于FF17,IE9,Chrome v23。 看起来像一个体面的解决方案,只要你不需要一个实际的边框。


回答

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

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


回答

您可以同时使用它们:

padding-right:10px;

padding-right:10%;

但最好与一起使用。


回答

如果填充不适合您,另一种解决方法是使用<colgroup>添加额外的列并通过宽度设置边距。 上面没有任何填充解决方案对我有用,因为我试图给单元边框本身一个边距,这就是最终解决问题的方法:

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

使用:nth-​​child设置表格单元格的边框样式,以便第2列和第3列显示为单列。

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