Html 仅设置表格单元格之间的空间

在我的表格中，我只想设置单元格之间的间距，，这样表格单元格之间就没有间距，表格本身就只在两个单元格之间。我的表格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>

该表应如下所示：

桌面

|运输署|

|运输署|

桌尾

TD和TR之间没有空间，仅在两个TD之间。 建议？

你应该试试这个，希望你的问题能解决

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>

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

这可以做到：

.president-table{
    border-collapse: separate;
    border-spacing: 15px 15px; /* notice the second 15px '/
}

在第一个标记中，您还错误地设置了src和class属性上的引号“”

应该是这样的

<img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>

使用
边框间距不可能达到预期效果，因为这样会在每个单元格周围增加空间，而不仅仅是在“内部”单元格之间

单元格填充不起作用，因为它也会在四面生长单元格

如果您可以使用CSS3，那么您可以尝试

table.test td:not(:last-child) { padding: 0 10px 0 0; }

如果没有CSS3，则必须为每行中除最后一个TD之外的所有TD添加一个样式，以使单元格具有右填充（或除第一个之外的所有TD都具有左填充）

注意：无法在单元格外获得空间，因为表格占用了边距（）

我相信您将需要一些额外的HTML，但还不算太糟。正如Aarondigula所指出的，基本问题是不能为单个表中的单元格设置单独的
单元格填充。因此，解决这个问题的方法是使用额外的元素，并将其设置为样式

<tr>
    <td>Cell</td>
    <td>
        <div class="mid_col">Cell</div>
    </td>
    <td>Cell</td>
</tr>

您是否尝试在您的桌子上使用
边框折叠：折叠。最终目标是什么？与在同一个表中唯一地分隔单个表单元格相比，可能有更好的方法来实现所需的结果。我有一个表。不幸的是，它一定是一张桌子。我知道有两列，我需要在这两列之间留出空间，但是TD本身和表格边缘之间不能有空间您好，TD和表格边缘之间仍然有空间。目标是只在两个TD之间创造空间，而不是在两个TD之间创造空间，我的朋友，它是垂直的。使用
边框间距：10px 0px以具有水平间距。我只需要TD之间的水平间距，而不需要TD和TR之间的水平间距。您好，您建议在顶部添加另一个不需要的填充物，而不是使左右两侧的填充物消失。然后删除前15px，因为这将在TD的右侧添加填充物。你也可以试试。主席表td{margin:10px}；因为它应该只在单元格之间添加您想要的空格。对于表格来说，边距没有任何效果。-1
边框间距
在单元格的所有边周围添加空格，而不仅仅是在内部单元格之间。谢谢您提供的信息性答案。我现在就来调查一下。我曾想过这个主意，但总是喜欢用页边空白。如果没有其他解决办法，我会做的。谢谢。@Anton.P使用
margin
基本相同，只需将
td:nth类型的填充设置为
0px
，并将margin添加到
.mid\u col
<tr>
    <td>Cell</td>
    <td>
        <div class="mid_col">Cell</div>
    </td>
    <td>Cell</td>
</tr>

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