Html 仅设置表格单元格之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19131870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting space between table cells only
提问by Anton.P
In my table I want to set the space between the cells onlyso that there is no spacing between table cell and the table itself only between each two cells. My table HTML is 2 columns and 2 rows as shown here:
在我的表格中，我只想设置单元格之间的空间，以便表格单元格和表格本身之间没有间距，仅在每两个单元格之间。我的表格 HTML 是 2 列和 2 行，如下所示：
<table class="president-table" border="0">
<tbody>
<tr>
<td>
some text
</td>
<td>
<img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="images/kate-240x300.jpg" width="240" height="300" />
</td>
</tr>
</tbody>
</table>
I used the following CSS:
我使用了以下 CSS：
.president-table{
border-collapse: separate;
border-spacing: 15px 0px;
}
the table should look like this:
该表应如下所示：
TABLE TOP
|TD TD|
|TD TD|
TABLE END
桌上
|TD TD|
|TD TD|
桌尾
there is no space between the TD and TR only between each two TD's. suggestions?
TD 和 TR 之间没有空间，仅在每两个 TD 之间。建议？
回答by Aaron Digulla
It's not possible to achieve the desired effect with border-spacingsince that adds space around each cell, not only between "inner" cells.
不可能达到预期的效果，border-spacing因为这会增加每个单元格周围的空间，而不仅仅是“内部”单元格之间的空间。
Cell padding doesn't work because it also grows the cells on all four sides.
单元格填充不起作用，因为它还会在所有四个边上生长单元格。
If you can use CSS3, then you can try
如果你可以使用CSS3，那么你可以尝试
table.test td:not(:last-child) { padding: 0 10px 0 0; }
If you don't have CSS3, then you'll have to add a style to all but the last TD in each row which gives the cell a right padding (or all but the first with a left padding).
如果您没有 CSS3，那么您必须为每行中除最后一个 TD 之外的所有元素添加样式，从而为单元格提供右填充（或除第一个之外的所有元素都具有左填充）。
Note: There is no way to get space outside of the cell because tables swallow the margin (Cannot put margin on <td> tag with neither CSS nor cellspacing attribute)
注意：没有办法在单元格外获得空间，因为表格会吞掉边距（不能在 <td> 标签上放置边距，既没有 CSS 也没有 cellspacing 属性）
回答by DACrosby
I believe you're going to need a bit of extra HTML, but not too bad. The basic problem, as AaronDigulla noted, is that you can't set a separate cell-paddingfor cells in a single table. The way around the issue, then, is to use extra elements and style them instead.
我相信您将需要一些额外的 HTML，但还不错。正如 AaronDigulla 所指出的，基本问题是您无法cell-padding为单个表中的单元格设置单独的单元格。那么，解决这个问题的方法是使用额外的元素并为其设置样式。
<tr>
<td>Cell</td>
<td>
<div class="mid_col">Cell</div>
</td>
<td>Cell</td>
</tr>
Now you don't need any cell padding/spacing at all - you can just style the .mid_coldivs and you're off to the races.
现在您根本不需要任何单元格填充/间距 - 您只需设置.mid_coldiv 的样式即可开始比赛。
/* No spacing on the cells */
table{
border-collapse: collapse;
border-spacing: 0px;
}
/* General cell styling - also styling the new divs to match */
.mid_col,
td {
padding: 12px;
}
/* This takes the vertical spacing off of the tds holding the new divs
It also sets the space between each column (here 25px) */
td:nth-of-type(2){
padding:0px 25px;
}
回答by NaYaN
You sholud try this, hope your problem solve.
你应该试试这个，希望你的问题能解决。
HTML:
HTML：
<table class="test">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
CSS:
CSS：
table.test td {
background-color: lime;
margin: 12px 12px 12px 12px;
padding: 12px 12px 12px 12px;
}
table.test {
border-collapse: separate;
border-spacing: 10px;
*border-collapse: expression('separate', cellSpacing = '10px');
}
回答by user1021726
This will do it:
这将做到：
.president-table{
border-collapse: separate;
border-spacing: 15px 15px; /* notice the second 15px '/
}
Also in your first tag you are setting the quotes "" on the src and class attribute wrongly.
同样在您的第一个标签中，您错误地在 src 和 class 属性上设置了引号 ""。
This is how it should look
这是它应该看起来的样子
<img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>
