blocks|key|1374356|text|如果你不能使用填充(例如，你在td中有边框)，试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374357|table+{+
+++++++++++border-collapse:+separate;
+++++++++++border-spacing:+2px;
}|code-block|syntax|javascript|1374358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you can't use padding (for example you have borders in td) try this</p>

<pre><code>table { 
           border-collapse: separate;
           border-spacing: 2px;
}
</code></pre>


blocks|key|1589348|text|我知道这有点晚了，但需要说明的是，您也可以使用CSS选择器来实现这一点(消除了对内联样式的需要)。此CSS将填充应用于每行的第一列：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589349|table+>+tr+>+td:first-child+{+padding-right:10px+}|code-block|syntax|javascript|1589350|这将是您的HTML，没有CSS!：|1589351|<table><tr><td>data</td><td>more+data</td></tr></table>|1589352|这允许更优雅的标记，特别是在需要使用CSS进行大量特定格式设置的情况下。|1589353|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:</p>

<pre><code>table &gt; tr &gt; td:first-child { padding-right:10px }
</code></pre>

<p>And this would be your HTML, sans CSS!:</p>

<pre><code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;more data&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>

<p>This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS. </p>


blocks|key|1374250|text|遗憾的是，边距不适用于单个单元格，但是您可以在两个单元格之间添加额外的列，以便在两个单元格之间留出空格……另一种选择是使用与背景颜色相同的边框...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374251|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>margin does not work unfortunately on individual cells, however you could add extra columns between the two cells you want to put a space between...  another option is to use a border with the same colour as the background...</p>


blocks|key|1589642|text|您可以简单地这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589643|<html>
<table>
++++<tr>
++++++++<td>one</td>
++++++++<td+width="10px"></td>
++++++++<td>two</td>
++++</tr>
</table>
</html>|code-block|syntax|javascript|1589644|不需要CSS+:)这个10px是你的空间。|1589645|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can simply do that:</p>

<pre><code>&lt;html&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;one&lt;/td&gt;
        &lt;td width="10px"&gt;&lt;/td&gt;
        &lt;td&gt;two&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;/html&gt;
</code></pre>

<p>No CSS is required :) This 10px is your space.</p>


blocks|key|1589206|text|试试padding-right。不允许将margin放在单元格之间。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1589207|<table>
+++<tr>
++++++<td+style="padding-right:+10px;">one</td>
++++++<td>two</td>
+++</tr>
</table>|code-block|syntax|javascript|1589208|entityMap^0|2|D|K|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Try <code>padding-right</code>. You're not allowed to put <code>margin</code>'s between cells.</p>

<pre><code>&lt;table&gt;
   &lt;tr&gt;
      &lt;td style="padding-right: 10px;"&gt;one&lt;/td&gt;
      &lt;td&gt;two&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


blocks|key|1374101|text|您不能以这种方式在单元格中挑选出单独的列。在我看来，最好的选择是在第二列中添加style='padding-left:10px'，并将样式应用于内部div或元素。这样你就可以实现更大空间的错觉。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1374102|entityMap^0|13|P|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>You can't single out individual columns in a cell in that manner.  In my opinion, your best option is to add a <code>style='padding-left:10px'</code> on the second column and apply the styles on an internal div or element.  This way you can achieve the illusion of a greater space.</p>


blocks|key|1374418|text|如果您可以控制表格的宽度，请在所有表格单元格上插入左边距，并在整个表格上插入负边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374419|table+{
++++margin-left:+-20px;
++++width:+720px;
}

table+td+{
++++padding-left:+20px;
}|code-block|syntax|javascript|1374420|注意，表格的宽度需要包括填充/边距宽度。以上面的例子为例，表格的视觉宽度将是700px。|1374421|如果您在表单元格上使用边框，这不是最好的解决方案。|1374422|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table.</p>

<pre><code>table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}
</code></pre>

<p>Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px.</p>

<p>This is not the best solution if you're using borders on your table cells.</p>


blocks|key|1589516|text|遵循Cian的解决方案，设置边框而不是边距，我发现可以将边框颜色设置为透明，以避免必须与背景颜色匹配。适用于FF17，IE9，Chrome+v23。如果你不需要实际的边框，这似乎是一个不错的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589517|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Following Cian's solution of setting a border in place of a margin, I discovered you can set border color to transparent to avoid having to color match the background. Works in FF17, IE9, Chrome v23. Seems like a decent solution provided you don't also need an actual border.</p>


blocks|key|1589692|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589693|<!DOCTYPE+html>
<html>
<head>
<style>
table{
border-spacing:+16px+4px;
}

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

<table+style="width:100%25">
++<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>|code-block|syntax|javascript|1589694|1589695|使用填充不是正确的方式，它可能会改变外观，但这不是你想要的。这可能会解决你的问题。|1589696|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table style="width:100%"&gt;
  &lt;tr&gt;
    &lt;td&gt;Jill&lt;/td&gt;
    &lt;td&gt;Smith&lt;/td&gt;		
    &lt;td&gt;50&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Eve&lt;/td&gt;
    &lt;td&gt;Jackson&lt;/td&gt;		
    &lt;td&gt;94&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;		
    &lt;td&gt;80&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Using padding is not correct way of doing it, it may change the look but it is not what you wanted. This may solve your issue.</p>


blocks|key|1374524|text|如果填充对你不起作用，另一个变通办法是添加额外的列，并使用<colgroup>通过宽度设置边距。上面的填充解决方案对我来说都不起作用，因为我试图给单元格边框本身留出一个边距，而这就是最终解决问题的方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1374525|<table>
++<colgroup>
++++<col>
++++<col+width="20px">
++++<col>
++</colgroup>
++<tr>
+++++<td>data</td>
+++++<td></td>
+++++<td>more+data</td>
+++</tr>
</table>|code-block|syntax|javascript|1374526|使用:nth-child设置表单元格边框的样式，以便第二列和第三列显示为一列。|1374527|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;+}|1374528|entityMap^0|T|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>If padding isn't working for you, another work around is to add extra columns and set a margin via width using <code>&lt;colgroup&gt;</code>. None of the padding solutions above were working for me as I was trying to give the cell border itself a margin, and this is what solved the problem in the end:</p>

<pre><code>&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col&gt;
    &lt;col width="20px"&gt;
    &lt;col&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
     &lt;td&gt;data&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;more data&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Style the borders of the table cells using :nth-child so that the 2nd and third columns appear to be a single column.</p>

<pre><code>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; }
</code></pre>


<p>In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on the left hand side, but to no effect.</p>


CSS Cell Margin

在我的HTML文档中，我有一个两列多行的表。如何使用css增加第一列和第二列之间的间距？我尝试对左侧的每个单元格应用“margin right: 10px;”，但都没有效果。

问CSS单元格边距
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS单元格边距EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS单元格边距
EN